使用JavaScript和克隆节点添加引导模式

我试图在页面通过单击按钮加载后，向页面添加一个模式（在下面的示例中，我是在DocumentReady上完成的，而不是单击）。模式是通过克隆另一个模式，然后将克隆附加到DOM来创建的。模态节点出现在DOM中，但在发出.modal（）命令时，模态不会打开。我已经创建了一个简单的代码笔来显示我的代码，并将在下面显示它

代码笔：

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>

---

在代码笔上，您没有添加引导所需的

jQuery

$（“文档”）.ready（函数（）{
var newModal=$（“#示例模型”）.clone（false，true）；
attr（“id”，“NewModelId”）
$（'LocalModalArea'）.append（newModal）；
$（“#NewModelId”）.addClass（'super-red'）；
$（“#NewModelId”）.model（“show”）
});  
。超红色{
背景色：暗色；
}

JS-Bin
模态头
接近
在您的代码笔上，您没有添加引导所需的
jQuery
，如果添加了
jQuery
，则在我的代码笔示例中，调整引导和jQuery脚本的顺序似乎可以解决此问题。在我的实际项目中，我调整了调用脚本的位置，这解决了我的问题@azs06如果您回答建议更改我的脚本发布顺序，我会将其作为答案进行检查。@azs06如果您回答建议更改我的脚本发布顺序，我会将其作为答案进行检查。
 $("Document").ready(function () {
   var newModal = $("#exampleModel").clone(true, true);
   newModal.attr("id", "NewModelId")
   $('#LocalModalArea').append(newModal)
   $("#NewModelId").modal("show")
 });