Question

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

<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>

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

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

带远程参数的Bootstrap Modal不起作用

1 个答案: