如何模仿Bootstrap中模式弹出窗口的阴影效果？

Question

In Bootstrap, there's the effect of modal popup window where the rest of the page gets inactivated (when clicking on a link, for instance) and grayed out. I'd like to mimic that effect in my own CSS.

After looking for a few hours into the CSS files of the package, I concluded that I won't be able to back-engineer the behavior myself. Simply too much junk in the trunk for me.

How can I mimic the described behavior in a custom way? Or did I happen to hit a very complicated issue that requires border-line black magic to get working?

Answer 1

You can add a div that covers the entire page with a higher z-index than your content. Make the div partially see through to get the desired look.

If you are adding a modal/popup, make sure this has a higher z-index than the backdrop.

Here's an example:

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

There's nothing complicated about it. It's just a "backdrop" using an absolute positioned element with partial opacity so that elements behind it show through.

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

Demo http://www.codeply.com/go/KhCqGTSCBe

Answer 3

I guess the simplest solution is to override .modal-backdrop.show class.

By default it is set to:

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

and you can just override it to

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

You can change anything u want in this class

Answer 4

use css position & z-index and opacity can implements modal overlay.

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