Html 如何使用javascript将引导模式动态附加到主体_Html_Bootstrap Modal

Html 如何使用javascript将引导模式动态附加到主体

html

Html 如何使用javascript将引导模式动态附加到主体,html,bootstrap-modal,Html,Bootstrap Modal,我有一个如下所示的引导模型，我想通过调用javascript函数addModal（）将此模式插入每个html页面；它应该将模态附加到body标记怎么做 &时代；模态头模态中的一些文本接近一种简单的方法是使用jquery： <script> $(document).ready(function() { $("#ModalDiv").load("yourModal.html"); }); </script> $（文档）.ready（函

我有一个如下所示的引导模型，我想通过调用javascript函数addModal（）将此模式插入每个html页面；它应该将模态附加到body标记怎么做


&时代；
模态头
模态中的一些文本
接近

一种简单的方法是使用jquery：

<script>
   $(document).ready(function() {
      $("#ModalDiv").load("yourModal.html");
   });
</script>


$（文档）.ready（函数（）{
$（“#ModalDiv”）.load（“yourModal.html”）；
});

HTML:


//你的代码
//你的代码

好的。现在，通过这种方式，您只需链接js文件，然后调用函数。（对于

.append（）

方法，仍然需要jquery）

函数addModal（）{
$（“正文”）.append（'
&时代；
模态头
模态中的一些文本
接近
');
}

你想在加载页面时添加模式吗？是的，但它应该来自javascript，使用函数调用，这样我会将js文件添加到每个页面并调用函数，它会将模式附加到该页面，而你的文件不是html php对吗？如果是php，您甚至不需要函数：

不，实际上我希望该模式来自js文件。这是html页面不是phpi我没有your-modal.htm我想从js文件中添加模态我想将模态div附加到body标记中

<body>

   //your code

   <div id="ModalDiv"></div>

   //your code

</body>

function addModal() {
  $("body").append('<!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
              <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
       </div>
  </div>');
}