Question

我修改了原始modal.js脚本以支持ajax内容，并添加了一个名为＆＃34; ajax＆＃34;的新行为。这是我的代码：

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')
});

在你调用modl的html中：

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

Answer 2

这样做怎么样：

$('body').on('click', '.domOdal', function() {
    $.ajax({
      url: "specs.html",
      type: 'POST',
      dataType: 'xml',
      dataType: 'html'
    }).done(function(response) {
        console.log(response)
      $(response).modal();
    });     
});

语义UI模式和ajax加载的内容

2 个答案: