当背景选项为 False 时启用在引导模式外部单击

Posted

技术标签:

【中文标题】当背景选项为 False 时启用在引导模式外部单击【英文标题】：Enable Clicking Outside Bootstrap Modal when Backdrop Option is False 【发布时间】：2019-10-10 02:50:25 【问题描述】：

我使用 Bootstrap 模态有点非传统，因为我的模态固定在窗口底部，就像 GDPR“接受 cookie”通知一样。

根据Bootstrap Modal Options，我还通过将“backdrop”选项设置为“false”禁用了出现的灰色叠加层，因此用户可以在模态之外用鼠标滚动并仍然看到他们的网站，但是 他们无法点击网站上的任何内容，因为父模态容器是全高/全宽，具有更高的 z-index，即使它是透明的。

这里的代码说明了在显示模式时无法单击链接或与文本交互的问题。

jQuery(document).ready(function($) 
      
  $('#storyGate').modal(backdrop: false);
  $('#storyGate').on('shown.bs.modal', function (e) 
    $("body").removeClass("modal-open");
  );		

); 
/* Story Gate Styles */
#storyGate .modal-dialog 
	max-width: 100%;
	margin-top: 0;

#storyGate .modal-content 
	border: 0;
	border-radius: 0;
	background: #ca2742;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Modal -->
<div class="modal fade m-0" id="storyGate" tabindex="-1" role="dialog" aria-labelledby="shareStoryLabel" aria-hidden="true">
  <div class="modal-dialog fixed-bottom w-100 m-0" role="document">
    <div class="modal-content">
      <div class="modal-body p-2">
        <div class="d-flex justify-content-between align-items-center">
          <p class="m-0 text-white">Have you ever eaten ice cream?</p>
          <div class="buttons d-flex flex-column flex-sm-row pr-4">
            <a href="#!yes" role="button" class="btn btn-light mr-md-2 my-2">Yes</a>
            <a href="#!no" role="button" class="btn btn-outline-light close-modal my-2 mr-0" data-dismiss="modal">No</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<h1>html Ipsum Presents</h1>

<p><strong>Pellentesque</strong> <a href="http://***.com">why can't I click this</a> et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a 
  display: block;
  width: 300px;
  height: 80px;

</code></pre>

<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

谢谢！

【问题讨论】：

真的需要模态吗？为什么不使用位于下方的div？或者改用toast 怎么样？ 它不一定是模态的，但我很好奇是否可以允许模态之外的交互，尤其是在利用backdrop: false 选项时。 【参考方案1】：

这是因为 Bootstrap 在 modal 类上应用了不需要的 css（仅在我们的例子中）...

.modal 
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0;

在上面的css中.modal有top:0;bottom:0;right:0;left:0;。在这种情况下，模态将采用 100% height 和 width。所以我们只需将top 和left 覆盖为auto，如下所示...

$('#storyGate').css('top':'auto', 'left':'auto');

我们也可以通过 css 解决这个问题...

.modal
     top:auto !important;
     left:auto !important;



jQuery(document).ready(function($) 
      
  $('#storyGate').modal(backdrop: false);
  $('#storyGate').on('shown.bs.modal', function (e) 
    $("body").removeClass("modal-open");
    
  );		
$('#storyGate').css('top':'auto', 'left':'auto');
);
/* Story Gate Styles */
#storyGate .modal-dialog 
	max-width: 100%;
	margin-top: 0;

#storyGate .modal-content 
	border: 0;
	border-radius: 0;
	background: #ca2742;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Modal -->
<div class="modal fade m-0" id="storyGate" tabindex="-1" role="dialog" aria-labelledby="shareStoryLabel" aria-hidden="true">
  <div class="modal-dialog fixed-bottom w-100 m-0" role="document">
    <div class="modal-content">
      <div class="modal-body p-2">
        <div class="d-flex justify-content-between align-items-center">
          <p class="m-0 text-white">Have you ever eaten ice cream?</p>
          <div class="buttons d-flex flex-column flex-sm-row pr-4">
            <a href="#!yes" role="button" class="btn btn-light mr-md-2 my-2">Yes</a>
            <a href="#!no" role="button" class="btn btn-outline-light close-modal my-2 mr-0" data-dismiss="modal">No</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque</strong> <a href="http://***.com">why can't I click this</a> et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a 
  display: block;
  width: 300px;
  height: 80px;

</code></pre>

<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

【讨论】：

【参考方案2】：

只是你的代码有额外的 .modal position: fixed; top: unset!important; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: hidden; outline: 0;

或者我们可以说只为模态添加top: unset!important; css 将起作用.modal top: unset!important; 

jQuery(document).ready(function($) 
      
  $('#storyGate').modal(backdrop: false);
  $('#storyGate').on('shown.bs.modal', function (e) 
    $("body").removeClass("modal-open");
  );		

); 
/* Story Gate Styles */
#storyGate .modal-dialog 
	max-width: 100%;
	margin-top: 0;

#storyGate .modal-content 
	border: 0;
	border-radius: 0;
	background: #ca2742;



.modal 
    position: fixed;
    top: unset!important;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Modal -->
<div class="modal fade m-0" id="storyGate" tabindex="-1" role="dialog" aria-labelledby="shareStoryLabel" aria-hidden="true">
  <div class="modal-dialog fixed-bottom w-100 m-0" role="document">
    <div class="modal-content">
      <div class="modal-body p-2">
        <div class="d-flex justify-content-between align-items-center">
          <p class="m-0 text-white">Have you ever eaten ice cream?</p>
          <div class="buttons d-flex flex-column flex-sm-row pr-4">
            <a href="#!yes" role="button" class="btn btn-light mr-md-2 my-2">Yes</a>
            <a href="#!no" role="button" class="btn btn-outline-light close-modal my-2 mr-0" data-dismiss="modal">No</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque</strong> <a href="http://***.com">why can't I click this</a> et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a 
  display: block;
  width: 300px;
  height: 80px;

</code></pre>

<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

【讨论】：

以上是关于当背景选项为 False 时启用在引导模式外部单击的主要内容，如果未能解决你的问题，请参考以下文章

单击选项时，引导模式上的 Select2 消失？

HTML/引导选项卡

从角度 ui 引导模式中单击时如何捕获背景单击事件？

如果为空选择选项，则单击按钮时显示模式引导

如何使用引导对话框作为 vueJs 组件？

打开 Bootstrap 模式弹出窗口时启用背景