Как получить результат модального диалога в jQuery

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

(сайт для меня заблокирован, иначе посмотрю)

Вот как работает окно подтверждения в 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();
      });
    }
  });
}

Если ваш HTML-код выглядит следующим образом, и вы пытаетесь избежать начальной загрузки, попробуйте следующее. Вы также можете применить AJAX к этой структуре, поскольку она такая же, как и любая другая часть HTML вашей страницы. Или вы попробуете то же самое с помощью Bootstrap, и ваша работа станет проще. Вот код, попробуйте. Его все еще можно улучшить и изменить:

$("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>

Надеюсь, это было полезно.

Здесь - ссылка на скрипку.