如何在 Bootstrap 中模拟模态弹出窗口的阴影效果？答案

【问题标题】：How to mimic the shading effect of modal popups in Bootstrap?如何在 Bootstrap 中模拟模态弹出窗口的阴影效果？
【发布时间】：2017-07-18 05:46:48
【问题描述】：

在 Bootstrap 中，有modal popup window 的效果，页面的其余部分被停用（例如，当单击链接时）并变灰。我想在自己的 CSS 中模仿这种效果。

在查看包的 CSS 文件几个小时后，我得出结论，我自己无法对行为进行反向工程。对我来说，后备箱里的垃圾太多了。

如何以自定义方式模仿所描述的行为？还是我碰巧遇到了一个非常复杂的问题，需要黑魔法才能发挥作用？

【问题讨论】：

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

【解决方案1】：

您可以添加一个覆盖整个页面的 div，其 z-index 高于您的内容。使 div 部分透视以获得所需的外观。

如果您要添加模态/弹出窗口，请确保它的 z-index 高于背景。

这是一个例子：

$('#test').click(function() {
  var backdropHeight = $(document).height();
  $('#backdrop').css('height', backdropHeight);
  $('#backdrop').fadeIn(100, function() {
    $('#modal').fadeIn(200);
  });
});

$('#closeModal').click(function() {
  $('#modal').fadeOut(200, function() {
    $('#backdrop').fadeOut(100);
  });
});

#backdrop {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10;
}

#modal {
  display: none;
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  height: 200px;
  width: 200px;
  background: #fff;
  text-align: center;
  z-index: 11;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<h1>Hellow World</h1>
<button id="test">Show Modal</button>
<div id="modal">
  <h2>My modal</h2>
  <button id="closeModal">Close Modal</button>
</div>
<div id="backdrop"></div>

【讨论】：

【解决方案2】：

没有什么复杂的。它只是一个“背景”，使用具有部分不透明度的绝对定位元素，以便它后面的元素显示出来。

.backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
  opacity: 0.5;
}

演示http://www.codeply.com/go/KhCqGTSCBe

【讨论】：

内容很大时，这种情况下页面会滚动。
OP 没有指定滚动，只是“点击链接时无效”。在某些情况下，他们可能想要滚动，所以这不是问题。

【解决方案3】：

我想最简单的解决方案是覆盖 .modal-backdrop.show 类。

默认设置为：

.modal-backdrop.show{
    opacity: .5;
}

你可以把它覆盖到

.modal-backdrop.show{
    opacity: 0!important; /* to disable "gray effect" */
    /* OR */
    opacity: 1;
    background: red;
    /* to change background to red */
}

你可以在这个课程中改变任何你想要的东西

【讨论】：

【解决方案4】：

使用 css position & z-index 和 opacity 可以实现模态叠加。

$('input').click(function(){
  var methodName=$(this).attr('id');
   $('.modal-dialog')[methodName]();;
});

html,body{border:0;padding:0;margin:0;}

.modal-dialog,.overlay{
 position:absolute;
 width:100%;
 height:100%;
 left:0;
 top:0;
}
.overlay{
 background:#000;
 opacity:0.1;
 z-index:100;
}
.dialog{
 position:absolute;
 z-index:1000;
 left:50%;
 top:50%;
}
.modal-dialog{
 display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id='fadeIn' value="Show"/>
<div class='modal-dialog'>
  <div class='dialog'>
    <input id='fadeOut' type='button' value='Cancel'>
  </div>
  <div class="overlay"></div>
</div>

【讨论】：