在页面加载时加载引导模式时允许后台活动答案

【问题标题】：Allow background activities when loading bootstrap modal on page load在页面加载时加载引导模式时允许后台活动
【发布时间】：2018-07-05 09:00:47
【问题描述】：

我希望引导模式出现在页面加载时页面的左下角，并且仅在单击 x 按钮时才允许它消失，而不是在单击屏幕上的任何位置时消失。到目前为止，我已经让这些工作，但下一个问题是，当加载引导模式时，它会阻止任何背景活动，如页面滚动或链接点击或任何此类事情，并在屏幕前添加不透明的背景阴影。当模态加载并显示在左下角时，如何使阴影消失并允许访问网站？

这是我的代码。

<script>
$(document).ready(function() {
  $(window).on('load',function(){
      $('#myModal').modal('show');
  });
  $('#myModal').modal({
    backdrop: 'static',
    keyboard: false
  });
});
</script>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <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>

【问题讨论】：

标签： javascript jquery html twitter-bootstrap bootstrap-modal

【解决方案1】：

听起来不像是在模态对话框之后，而是看起来像一个。

你仍然可以渲染一个modal，但是不要调用.modal on in，然后自己处理关闭事件。

例如。

$(document).ready(function() {
  $(window).on('load',function(){
    var m = $('#myModal');
    m.show();
    m.find("button").on("click", 
      function () { m.hide(); });
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="myModal" class="modal show" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Header</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </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>

【讨论】：