如何模仿Bootstrap中模态弹出窗口的着色效果？

Question

在Bootstrap中，有modal popup window 的效果，其中页面的其余部分被取消激活（例如，点击链接时）并显示为灰色。我想在我自己的CSS中模仿这种效果。

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

如何以自定义方式模仿所描述的行为？或者我碰巧遇到了一个非常复杂的问题，需要边界黑魔术才能起作用？

Answer 1

您可以使用比内容更高的z-index添加覆盖整个页面的div。让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>

Answer 2

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

.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

Answer 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 */
}

您可以在此课程中更改您想要的任何内容

Answer 4

使用css位置＆amp; z-index和opacity可以实现模态覆盖。

>>> xorTwoLists(c1, c2)
[235, 180, 47, 188, 4, 210, 121, 113]

$('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;
}