Как сделать модальное диалоговое окно подтверждения перед отправкой формы?

Question

Я начинаю программировать в веб-дизайне и 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> 

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

Answer 1

Лично я не делал этого так.

Boxy - это плагин jQuery, который уже имеет контрольный элемент.

Пример для этого заключается в следующем:

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

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

EDIT : Реализация для вас будет ....

$(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(), предоставляемой браузерами, поскольку она не имеет возможности блокировать выполнение программы, пока диалог виден.

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

Answer 2

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

Этот простой Javascript должен сделать следующее:

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

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

Answer 3

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

Modal Confirmation Dialog on Form Submit