如何将数据传递给模态以使用bootstrap4.6动态构造模态

Posted 2023-03-21

【中文标题】如何将数据传递给模态以使用bootstrap4.6动态构造模态

【英文标题】：how to pass data to modal to dynamically construct modal using bootstrap4.6

【发布时间】：2022-01-15 05:08:50

【问题描述】：

最近我转向 adminLTE3（使用 bootstrap 4.6）并将其用作 Tornado 的前端框架。我遇到了模态问题。 在旧版本的adminLTE（使用bootstrap 3.3）中，我可以为modal动态生成内容，代码如下：

<a href="/some/path" data-toggle="modal" data-target="#mymodal">click here to generate modal conetent</a>

<div class="modal fade" id="modal-default">
        <div class="modal-dialog">
          <div class="modal-content">
             <!-- content here will be generated by tornado using the above link '/some/path' --> 
         </div>
   </div>
</div> 

龙卷风处理程序代码：

@route("/some/path")
class SomeHandler(tornado.web.RequestHandler):
   def get(self):
      self.render("modal/test.html", msg="hello")

模板文件test.html如下：

<div class="modal-header">
  <h4 class="modal-title">Default Modal</h4>
</div>
<div class="modal-body">
  <p> msg </p>
</div>
<div class="modal-footer justify-content-between">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</button>
</div>

但是当我点击链接时，modal没有加载成功，是的，主页变暗了但是modal没有出现。

同样的方法在adminLTE（使用bootstrap3.3）上也能很好地工作，所以我不知道发生了什么，没有错误信息，bootstrap3.3和4.6中的modal有什么重要的变化吗？提前致谢。

如果我把所有的模态内容直接放到HTML文件中就可以正常工作了，也就是说bootstrap4的模态功能没问题吧？只是想知道为什么模态内容不能动态呈现。

在添加了一些调试信息后，我发现bootstrap 4 modal在点击时似乎抑制了超链接的触发。由于我没有找到 Tornado 处理程序对 '/some/path' 的调用，因此模态没有出现，因为模态仅包含一个框架，其中没有内容，实际上触发了模态（主页成为有点暗）。所以这里的问题是为什么当我点击它时链接没有触发 Tornado 处理程序来处理它？在引导程序 3 上，我确信链接将被触发并导致 Tornado 处理程序处理 /some/path。

【参考方案1】：

我找到了原因： 远程加载方法在引导程序 4 中已弃用。

This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework or calling jQuery.load yourself.

引导文档： https://getbootstrap.com/docs/3.4/javascript/#modals-options

一个类似的问题： Bootstrap 4 with remote Modal

希望这对遇到同样问题的人有所帮助。