modal-dialog - 语义 UI 模式和 ajax 加载内容

Question

我修改了原始的 modal.js 脚本以支持 ajax 内容，并添加了一个名为“ajax”的新行为，这是我的代码:

ajax: function(callback) {
  callback = $.isFunction(callback)
    ? callback
    : function(){}
  ;
  var $content = $(this).find('.content');
  $.get("contentData.php", function(data) {
    $content.html(data);
  });

我这样调用它:

$('body').on('click', '.domOdal', function() {
    $('.ui.modal')
        .modal({
            observeChanges: true
        }).modal('ajax')
});

上面的代码工作完美并且加载内容正确，但我想扩展一点，所以我可以包含附加信息，例如自定义 url、dataType 等几乎所有 ajax 选项，我想做初始化部分如下:

$('body').on('click', '.domOdal', function() {
    $('.ui.modal')
        .modal({
            observeChanges: true
        }).modal('ajax', {"id":5}, dataType:"json", "url": http://myurl.php" etc...)
});

Answer 1

有点晚了，但这对我有用:

$('body').on('click', '.domOdal', function (e) {
    e.preventDefault();
    $('.ui.modal')
        .modal({
            blurring: true,
            observeChanges: true,
            transition: 'scale',
            onVisible: function (callback) {
                callback = $.isFunction(callback) ? callback : function () { };
                var $content = $(this).find('.content');
                $.get("contentData.php", function (data) {
                    $content.html(data);
                });
            }
        }).modal('show')
});

在你的 html 中调用 modl 的地方:

<div class="ui modal">
    <i class="close icon"></i>
    <div class="content">
    </div>
</div>