Я новичок в программировании на веб / javascript и задаюсь вопросом, может ли кто-нибудь дать мне простой пример модального диалогового окна подтверждения непосредственно перед формой с несколькими кнопками отправки, отправляемыми с помощью предварительно определенной кнопки? Я наткнулся на jQuery и SimpleModal и задался вопросом, подойдет ли он моему проекту ASP MVC.

Я оказался в следующих нерабочих кодах, я думаю, что моя первая проблема в том, что я не знаю, как вернуть значение из диалогового окна ?:

<script type="text/javascript">
    $(document).ready(function() {
    $("form").submit(function(ev) {
            return confirm("Confirm?");
        });
    });

    function confirm(message) {
        $("#confirm").modal({
            close: true,
            overlayId: "confirmModalOverlay",
            containerId: "confirmModalContainer",
            onShow: function modalShow(dialog) {
                dialog.overlay.fadeIn("slow", function() {
                    dialog.container.fadeIn("fast", function() {
                        dialog.data.hide().slideDown("slow");
                    });
                });

                dialog.data.find(".confirmMessage").append(message);
                dialog.data.find(".btnYes").click(function() {
                    $.modal.close();                                       
                });
            }
        })
    }        
</script>


<div id="confirm" style="display:none">
    <a href="#" title="Close" class="modalCloseX simplemodal-close">x</a>
    <div class="confirmHeader"><span>Confirm</span></div>
    <p class="confirmMessage"></p>
    <div class="buttons">
        <div class="btnYes">Yes</div><div class="btnNo simplemodal-close">No</div>
    </div>
</div>

Было бы неплохо, если бы кто-нибудь направил меня куда-нибудь в интернет для ускоренного курса веб-программирования :)

2
William 30 Июл 2009 в 11:46
У вас не может быть модального диалога, потому что он лишит браузер возможности отображать другие вкладки. (И нет, это никогда не приемлемо.) Однако вы можете сделать наложение на самой странице с помощью JavaScript, что я оставлю другим, чтобы объяснить.
 – 
Sam Harwell
30 Июл 2009 в 11:52
Я обновил свой ответ, включив в него возможную реализацию boxy для вашего скрипта.
 – 
LiamGu
30 Июл 2009 в 12:22

3 ответа

Лучший ответ

Лично я не стал так делать.

Boxy - это плагин jQuery, в котором уже есть элемент управления окном подтверждения.

Пример для него следующий:

$('#confirm-actuator').click(function() {
    Boxy.confirm("Please confirm:", function() { alert('Confirmed!'); }, {title: 'Message'});
    return false;
});

Если вы посмотрите на сам сайт Boxy, он также покажет вам, как получить отправленное значение и т. Д.

РЕДАКТИРОВАТЬ: Реализация для вас будет ....

 $(document).ready(function() {
    $("form").submit(function(ev) {
        $('#mySubmitBtn').click(function() {
            Boxy.confirm("Are you sure?", function() { /**DO ACTION FOR CONFIRM**/ }, {title: 'Confirm'});
            return false;
        });
    });

});

Затем поместите идентификатор на кнопку отправки mySubmitBtn.

Я не тестировал этот код, но надеюсь, что это поможет.

Надеюсь это поможет.

Хотя, по словам разработчика, этот метод не предназначен для замены встроенной функции window.confirm (), предоставляемой браузерами, поскольку у него нет возможности блокировать выполнение программы, пока диалоговое окно отображается.

Однако я не думаю, что это повлияет на отправку вашей формы, поэтому вы должны быть готовы использовать этот метод.

3
LiamGu 30 Июл 2009 в 12:35
Большое спасибо за Вашу помощь. Я попробовал Boxy и узнал немного больше обо всем этом javascript. Однако я не могу заставить его работать слишком хорошо, и в итоге я использовал другой плагин jQuery (плагин поля для чтения / настройки скрытых полей) и встроенный диалог подтверждения для моего текущего проекта.
 – 
William
30 Июл 2009 в 13:25
Что вы имеете в виду, говоря, что не можете заставить его работать слишком хорошо? У меня было несколько проблем, когда я впервые попробовал его использовать, но я рад помочь, если смогу. Не забудьте проголосовать и отметить как ответ, если это, кстати, помогло. Хотя я сам здесь новенький, поэтому не уверен, все так делают или нет.
 – 
LiamGu
30 Июл 2009 в 13:52

Вот 3 различных способа сделать это:

Диалог модального подтверждения при отправке формы

2
JenJen 12 Авг 2009 в 01:02

Вам не нужно использовать jquery для простого модального диалогового окна подтверждения при отправке формы. Браузер предоставляет несколько диалоговых окон в модальной системе. Одно существо «подтверждает».

Этот простой javascript подойдет:

<form method="post" action="myurl.aspx" onsubmit="return confirm('Submit this form?')">
...
</form>

Чтобы получить ускоренный курс, посетите W3Schools или просто найдите учебные пособия в Google.

1
Matthew Lock 30 Июл 2009 в 12:07