CSS Bullet Box

Many times, we can not use some ready-made JS plug-ins to achieve the frame effect. As a result, you always have to use the most primitive way to achieve the effect like a frame.

Unfortunately, a recent encounter in the project, where the used code for a wave of finishing.

To implement CSS masking ideas are as follows:

Use a div popup to make a overlay, and use a div as the popover content to cover all of the div's. That

(1) A gray div that can cover the background completely;

(2) A popup pop-up effect (floating on the page, can be similar to the outstanding effect) of the div,div can be placed in their own content;

Apart to a piece of code, this code is to implement a read progress bar popup:

The code is as follows:

http://blog.csdn.net/u014665035/article/details/53079684

<!--pop-up layer start--><style>. background {display:block; Width:100%; Height:100%; Opacity:0.4; Filter:alpha (Opacity=40); Background: while;      position:fixed; Top:0; Left:0; Z-index:2000; Background-color: #666666; }   /*The style of the box that pops up*/. ProgressBar {border:solid 2px #86A5AD; Background:white No-repeat 18px 35px; }  /*style inside pop-up box*/. progressBar {display:block;      width:500px;      height:200px; Top:50%; Left:50%; Margin-left:-74px; Margin-top:-14px;      padding:10px 10px 10px 30px; Text-Align:left; Line-height:27px; Font-Weight:bold;      position:fixed; Z-index:2001; }    </style><!--popup dom--><div id= "Loading" style= "display:none; "> <div class=" Background "></div> <div class=" ProgressBar "" >> is drawing, please wait ...</div> </div><!--pop-up layer end-->//trigger close $ ("#loading"). Hide ();//Trigger Popup $ ("#loading"). Show ();

CSS Bullet Box