Question

我正在使用twitter boostrap，我想从另一个页面获取html并将其加载到我当前页面的模态中。所以我创建了一个javascript函数来处理这个问题。

在我的'index.php'中我有这个：

<button onclick="popIt('create_event.php', 'Create Event');" data-toggle="tooltip" data-placement="top" data-original-title="Edit" class="btn ttp"><i class="icon-pencil"></i></button>
<button onclick="popIt('tester.php', 'Test Head');" data-toggle="tooltip" data-placement="top" data-original-title="Delete" class="btn btn-danger ttp"><i class="icon-remove icon-white"></i></button>

javascript函数是这样的：

<script>

function popIt(url, header) {

        $('#myModal').modal({
            remote: url
        });
        $('#myModalLabel').html(header);
    }

当我点击按钮时会加载相应的页面，但当我关闭模态并单击另一个按钮时，它仍会加载上一页。

请问我做错了什么？感谢

Answer 1

完成隐藏后销毁对象

$('body').on('hidden', '.modal', function () {
    $(this).removeData('modal');
});

Answer 2

我在Bootstrap的模态小部件方面遇到了很多问题。两个主要问题是IE中的缓存和模式函数，在使用远程属性之前触发事件之前不等待ajax调用完成。我通过创建一个包装来修复这些问题来创建模态对话框。要修复缓存问题，请执行$ .get并在URL中添加timestamp参数，并在初始化模式窗口小部件之前将响应设置为content属性。请参阅下面的代码。希望这有帮助！

var $queue = $({});
if (settings.remote) {
  $queue.queue('modal_open', function(next) {
    $.when($.get(settings.remote + '&timestamp=' + new Date().getTime())).done(function(content) {
      settings.content = content;
      settings.remote = undefined;
      next();
    });
  });
}

$queue.queue('modal_open', function(next) {
  ...
  $modal.modal(settings);
  next();
}

$queue.dequeue('modal_open');
return $modal;

Answer 3

在$('#myModal').empty()函数的第一行尝试popIt。它可能是导致服务器响应延迟的原因

如果没有，你可以尝试融合获取请求和模态，例如，

$.get(url,function(data){
   $('#myModal').html(data)
}

Twitter Bootstrap Modal远程功能无法正常工作

3 个答案: