How do I get a result from a modal dialog in jQuery How do I get a result from a modal dialog in jQuery ajax ajax

How do I get a result from a modal dialog in jQuery


Here is how the confirm window works on simpleModal:

$(document).ready(function () {  $('#confirmDialog input:eq(0)').click(function (e) {    e.preventDefault();    // example of calling the confirm function    // you must use a callback function to perform the "yes" action    confirm("Continue to the SimpleModal Project page?", function () {      window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/';    });  });});function confirm(message, callback) {  $('#confirm').modal({    close: false,    overlayId: 'confirmModalOverlay',    containerId: 'confirmModalContainer',     onShow: function (dialog) {      dialog.data.find('.message').append(message);      // if the user clicks "yes"      dialog.data.find('.yes').click(function () {        // call the callback        if ($.isFunction(callback)) {          callback.apply();        }        // close the dialog        $.modal.close();      });    }  });}


If your HTML is like the following, and you are trying to avoid bootstrap, then you try it like the following. You can also apply AJAX on this structure since this just like any other part of the HTML of your page. Or you try the same using Bootstrap and your work will be easier. Here is a code, please give it a try. It still can be enhanced and modified:

$("button.try-it").on("click", function() {  $(".modal-container").removeClass("hide");});$(".close-btn").on("click", function() {  $(".modal-container").addClass("hide");});
.modal-container {  position: absolute;  background-color: rgba(35, 35, 35, 0.41);  top: 0;  bottom: 0;  height: 300px;  width: 100%;}.modal-body {  width: 100px;  height: 100px;  margin: 0 auto;  background: white;}.close-btn {  float: right;}.hide {  display: none;}.body-container {  position: relative;  box-sizing: border-box;}.close-btn {  cursor: pointer;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="body-container">  <div class="button">    <button class="try-it">Try It!!</button>  </div>  <div class="modal-container hide">    <div class="modal-body">      <span class="close-btn">x</span>      <p>Here is the content of the modal</p>      <!--You can apply AJAX on this structure since this just like any other part of the HTML of your page-->      <!--Or you can use Bootstrap modal instead of this one.-->    </div>  </div></div>