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

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

10 голосов
/ 08 сентября 2008

Я хотел бы использовать надстройку типа simple-modal или диалоговую надстройку в наборе пользовательского интерфейса. Тем не менее, как я могу использовать эти или любые другие и получить результат обратно. По сути, я хочу, чтобы модал выполнил некоторое взаимодействие AJAX с сервером и вернул результат для вызывающего кода, чтобы он кое-что сделал.

Ответы [ 3 ]

5 голосов
/ 08 сентября 2008

Вот как работает окно подтверждения на 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();
      });
    }
  });
}
0 голосов
/ 15 февраля 2019

Если ваш 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>

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

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

0 голосов
/ 08 сентября 2008

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

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

...