带有远程参数的引导模式不起作用

Posted 2023-02-24

【中文标题】带有远程参数的引导模式不起作用

【英文标题】：Bootstrap Modal with remote parameter does not work

【发布时间】：2013-08-10 18:37:44

【问题描述】：

我有以下代码要求弹出模式

<a data-toggle="modal" href="% url 'experience_update' i.id %" 
data-target="#modal">i.company_name</a>

在我的远程网址中，我有以下代码

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

这是引导文档中的默认代码。但是当我单击链接时，弹出框不起作用。有任何想法吗？

【参考方案1】：

您需要在每次按下按钮时加载内容并手动触发模式。检查下面的代码。

    <!-- remove data-toggle and href parameters -->
    <a data-company= i.id  data-target="#modal">i.company_name</a>

    $("a[data-target=#modal]").click(function(event) 
        event.preventDefault();
        var company_id = $(this).attr("data-company");

        /* random value as parameter just to build the url,
           it will be replaced below */
        var target = href="% url 'experience_update' 999 %";
        target = target.replace(999, company_id);
        $("#modal").load(target, function()
            $('#modal').modal('show');
        );
    );