我试图在页面加载后通过单击按钮向页面添加模式(在下面，我是在准备好文档而不是单击时完成的)。模式是通过克隆另一个模式然后将克隆附加到 DOM 创建的。模态节点出现在 DOM 中，但在给它 .modal() 命令时模态节点不会打开。我创建了一个简单的代码笔来显示我的代码，并将在下面显示。
代码笔:https://codepen.io/anon/pen/YxQrZG
HTML:
<div id="LocalModalArea">
<div class="modal fade" id="exampleModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div id="myModalLabel" class="sideLineHeader">
<h2><span>Modal Header</span></h2>
</div>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
JS:
$("Document").ready(function () {
var newModal = $("#exampleModel").clone(true, true);
newModal.attr("id", "NewModelId")
$('#LocalModalArea').append(newModal)
$("#NewModelId").modal("show")
});
最佳答案
在你的 codepen 上，你还没有添加 Bootstrap 所需的 jQuery。
$("Document").ready(function () {
var newModal = $("#exampleModel").clone(false, true);
newModal.attr("id", "NewModelId")
$('#LocalModalArea').append(newModal);
$("#NewModelId").addClass('super-red');
$("#NewModelId").modal("show")
}); .super-red{
background-color: darkred;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="LocalModalArea">
<div class="modal fade" id="exampleModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div id="myModalLabel" class="sideLineHeader">
<h2><span>Modal Header</span></h2>
</div>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>请注意，我添加了额外的 css 来突出显示克隆的元素。
关于javascript - 使用 JavaScript 和克隆节点添加 Bootstrap Modal，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45621755/