2

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

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

当然，假设在该页面的某处有一个名为#modal-add. 当我把它移到它自己的文件（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，我网站上的其他所有内容都正常运行，减去这个。）

编辑

由于 fiddle 似乎有一个内置的跨域请求，这里有一个简单的设置，任何拥有 WAMP 服务器的人都可以尝试：

模态的.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>

模态测试.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>
4

2 回答 2

3

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

据我所知，返回的结果只是用.html()等于innerHTML替换目标内所有内容的方法放入目标中。

因此，您可以将所有链接指向一个 Modal（带有id="modal"），它的内容将被 AJAX 响应替换。

于 2013-10-24T19:58:15.053 回答
0

顺便说一句，还值得注意的是，这种方法（使用远程页面作为对话源）仅限于一个外部源。（换句话说，如果您有三个不同的远程源，它只会加载您单击的第一个。）我尝试在#modaldiv 关闭后清空它，但这似乎不起作用；我发现的唯一方法是这个小提琴，它覆盖了默认的模态行为，每次手动加载内容，然后显示模态。为了更好地衡量（尽管我认为这不是必需的），我在模式关闭后清空了 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();
});

编辑

这里记录了一个更好的解决方案。

于 2013-10-24T20:20:16.753 回答