Question

我希望引导模式在页面加载时显示在页面的左下角，并且仅在单击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>

Answer 1

听起来不像是在模态对话框之后，而是类似的声音。

您仍然可以渲染模式，但不要在内部调用.modal，然后自己处理close事件。

例如

$(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>

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

1 个答案: