如何从jQuery中的模态对话框中获取结果

Question

我想在UI工具包中使用像simple-modal这样的加载项或对话框加载项。但是，我如何使用这些或其他任何结果并获得结果。基本上我希望模态与服务器进行一些AJAX交互，并返回调用代码的结果来做一些事情。

Answer 1

以下是确认窗口在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

由于模式对话框在页面上，您可以自由设置所需的任何文档变量。但是我见过的所有模态对话框脚本都包含一个使用返回值的演示，所以很可能在那个页面上。

（该网站被我阻止，否则我会看）

Answer 3

如果您的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>

希望这有用。

Here是小提琴的链接。