gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 19:46:07 25 4
gpt4 key购买 nike

我发现我可以在我的 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 的开发者工具没有注册任何事件。我创建了一个基本的 fiddle 来演示: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>

最佳答案

我认为您必须将 data-target 属性指向存在于 DOM 中的元素(不在 AJAX 响应中返回)。

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

因此您可以将所有链接指向一个模式(使用 id="modal"),它的内容将被 AJAX 响应替换。

关于javascript - bootstrap 3 远程模态似乎什么都不做,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19569460/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com