如何在单个html页面上处理许多引导模式

时间:2014-04-08 08:23:04

标签: twitter-bootstrap-3

我会在一个html页面上有10个引导按钮。 每个按钮通过ajax请求打开一个带有html fragmen的ootstrap模式。

<div class="modal fade" id="myModal"></div>

$('#myModal').modal();

我应该使用10种不同的ID创建10个不同的div吗?甚至是10个不同的实例?

 var dialogInstance1 = new BootstrapDialog({
            title: 'Dialog instance 1',
            message: 'Hi Apple!'
        });

我应该创建一个对话框吗?

当我打开modal1时,我会期待一些缓存问题,然后就在我打开modal2时,我仍然看到来自一个prvious ajax请求的一些毫秒modal1 html片段。

我应该如何创建这些模态?样本应该这样:

        $('#myModal').modal();

和实例化?这非常令人困惑。

有人可以分享他的经验,如何使用许多引导模态吗?

1 个答案:

答案 0 :(得分:0)

  

当我打开modal1时,我会期待一些缓存问题,然后就在我打开modal2时,我仍然看到来自一个prvious ajax请求的一些毫秒modal1 html片段。

假设您正在引用data-remote的缓存,您可能可以在Bootstrap v3.2.0中禁用它(请参阅https://github.com/twbs/bootstrap/pull/13183/)。

但是,我仍然建议不要使用data-remote,因为它并没有给你很多控制权。它:

  • 不提供或轻松让您执行任何错误处理
  • 没有给任何&#34; loading ...&#34;指示
  • 强制您必须在服务器端生成模式HTML(而不是,例如,从服务器返回JSON并使用客户端模板)

IMO,你应该:

  • 仅包含空白模态标记的一个实例
  • 在召唤你的模态的按钮上设置你自己的点击事件处理程序
  • 在您的点击事件处理程序中启动AJAX请求
  • 使用客户端模板使用请求的结果生成相应的模态
  • 使用$(...).modal()$(...).modal('show')(取决于模板的工作方式)在模板完成后显示模态