时间戳

首页 > 解决方案 > 如何使用 javascript 将引导模式动态附加到正文

html - 如何使用 javascript 将引导模式动态附加到正文

问题描述

我有一个如下所示的引导模型，我想通过调用 javascript 函数 addModal() 将此模式插入每个 html 页面；它应该将模态附加到正文标签如何做到这一点

<!-- 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>

标签： htmlbootstrap-modal

解决方案

行。现在这样你只需要链接你的 js 文件，然后调用函数。（该方法仍然需要 jquery .append()）

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>');
}

推荐阅读