Question

我发现我可以在我的index.php的正文中包含我的模态标记，并通过此行加载它而没有任何问题：

<a data-toggle="modal" href="#modal-add">Add</a>

当然，假设该页面中有一个名为#modal-add的div。当我把它移到自己的文件（modal-add.html）并试试这个：

<a data-toggle="modal" href="modal-add.html" data-target="#modal-add">Add</a>

......我看不出有什么事情发生了。点击链接后，Chrome的开发人员工具不会注册任何活动。我已经创建了一个基本的小提琴来演示：http://jsfiddle.net/tmountjr/3bnyq/2/

根据应该正常工作的文档（http://getbootstrap.com/javascript/#modals），对吗？我哪里错了？（我正在引用netdna中的Bootstrap js和css文件，以及来自其网站的jquery，以及我网站上的其他所有内容都正常运行，减去此内容。）

修改

由于看起来小提琴有一个内置的跨域请求，这里有一个简单的设置，任何拥有WAMP服务器的人都可以尝试：

modal.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    </head>
    <body>
        <p><a href="modaltest.html" data-toggle="modal" data-target="#modal">Click here</a></p>
        <script src="//code.jquery.com/jquery.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    </body>
</html>

modaltest.html：

<div id="modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add New Designation</h4>
            </div>
            <div class="modal-body">
                <form>
                    <fieldset>
                        <div class="form-group">
                            <label for="add-designation">Designation Description:</label>
                            <input type="text" name="add-designation" id="add-designation" class="form-control" />
                        </div>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="resetdesignation">Reset</button>
                <button type="button" class="btn btn-primary" id="adddesignation">Add Designation</button>
            </div>
        </div>
    </div>
</div>

Answer 1

我认为你必须将data-target属性指向DOM中存在的元素（不是在AJAX响应中返回）。

据我所知，返回的结果只是放入目标.html()方法等于innerHTML，它取代了目标内的所有内容。

因此，您可以将所有链接指向一个模态（使用id="modal"），并且其内容将仅替换为AJAX响应。

Answer 2

另外，值得注意的是，这种方法（使用远程页面作为对话源）仅限于一个外部源。（换句话说，如果你有三个不同的远程源它只会加载你点击的第一个。）我尝试在关闭后清空#modal div，但这似乎不起作用;我发现它的唯一方法是this fiddle，它会覆盖默认的模态行为，每次手动加载内容，然后显示模态。为了更好的衡量（虽然我不认为这是必需的）我在模态关闭后清空div，只是因此我没有在页面内部放置额外的代码。这是我的代码：

$("[data-target]").on('click', function(e) {
    e.preventDefault();
    var placeholder = $(this).data('target');
    var target = $(this).attr('href');
    $(placeholder).load(target);
});

$('#modal').on('hidden.bs.modal', function () {
    $("#modal").empty();
});

修改

有一个更好的解决方案记录here。

bootstrap 3远程模态似乎什么都不做

2 个答案: