我正试图包括一个JS CDN脚本来显示特定操作的消息。为了实现这一点,我试图让它首先在任何浏览器上工作。
这就是我正在努力做的:
document.querySelector('.circle').addEventListener('click', function() {
var m1 = $(makeModal('Somehting here')); // I would want to skip creating an HTML element with jQuery.
document.body.insertAdjacentHTML('beforeend', m1);
m1.modal('show');
}, false);
function makeModal(text) {
return `<div id="myModal" class="modal fade" role="dialog" style="display: none">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>${text}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>`;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>An app</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button class="circle">Click here</button>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
这可以工作,但短语[object Object]
被附加到按钮。另一件事,我猜每次有人点击按钮,节点被一次又一次地创建。
我应该在模态出现后删除它吗?好吧,你怎么会相信这些东西?
3条答案
按热度按时间cclgggtu1#
这段代码导致
[object Object]
:当我尝试没有这个代码,一切都很完美,你为什么要使用它?
如果他没有用,你可以直接删除他。
o2gm4chl2#
你只需要删除
document.body.insertAdjacentHTML('beforeend', m1);
来解决这个问题,因为insertAdjacentHTML()
是用来将节点插入DOM树的,从你的代码中,我可以看到你试图在end之前插入一个节点。请阅读Element.insertAdjacentHTML()
回答你的第二个问题,close
<button>
有一个属性data-dismiss="modal"
用于关闭模态,所以简单地说,每次用户点击close按钮都会完全关闭模态。ef1yzkbh3#
你可以在JS上这样做:
那么modal call的例子是:
在Bootstrap 5上运行,不需要jQuery。