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

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…&lt;/p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

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

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