使用JavaScript和克隆节点添加Bootstrap Modal

我试图在页面通过按钮单击加载后（在下面的文档就绪而不是点击）加载模式到页面。该模式是通过克隆另一个模式并将该克隆附加到DOM来创建的。模态节点出现在DOM中，但是在给出.modal（）命令时模态不会打开。我创建了一个简单的codepen，显示我的代码，并在下面显示。使用JavaScript和克隆节点添加Bootstrap Modal

Codepen：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") 
});

来源

2017-08-10 nejohannsen

在你的codepen上，你还没有添加引导程序所需的'jQuery'，如果'jQuery'添加了它似乎正在工作https://jsbin.com/pamiqac/edit?html,js,output – azs06

在我的代码笔示例调整我的引导程序和jQuery脚本的序列解决了这个问题。在我的实际项目中，我调整了脚本被调用的位置并解决了我的问题。 @ azs06如果你提出了一个答案，建议改变我的脚本发布的顺序，我会检查它作为答案。 – nejohannsen

@ azs06如果你提出了一个答案，建议改变我的脚本发布的顺序，我会检查它作为答案。 – nejohannsen

在您codepen你还没有加入这是由引导需要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{ 
 
\t 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> \t 
 
<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突出克隆元素。

来源

2017-08-14 15:49:20 azs06

使用JavaScript和克隆节点添加Bootstrap Modal

回答

相关问题