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

Question

I would like to use an add-in like simple-modal or the dialog add-in in the UI kit. However, how do I use these or any other and get a result back. Basically I want the modal to do some AJAX interaction with the server and return the result for the calling code to do some stuff with.

Answer 1

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();
      });
    }
  });
}

Answer 2

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>

Hope this was helpful.

Here is the link to a fiddle.