13

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

4

3 回答 3

8

以下是确认窗口在 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();
      });
    }
  });
}
于 2008-09-08T17:05:55.660 回答
1

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

希望这会有所帮助。

这是小提琴的链接。

于 2019-02-15T08:56:10.327 回答
0

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

（该网站已为我屏蔽，否则我会查看）

于 2008-09-08T16:38:19.253 回答