Home > Article > Web Front-end > div css implements a simple pop-up window (the background turns gray)_html/css_WEB-ITnose
div css implements a simple pop-up window (the background turns gray)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:481866browse
I made a website and needed to use the pop-up box function. I had never done this before, so I checked the information online, and then tried to write the simplest pop-up box effect.
Requirement: Click the pop-up box button to pop up a pop-up box based on the original page, and the background should turn gray. The original page cannot be edited until the pop-up box is closed.
Principle: Add two divs on the basis of the original page, one is the pop-up box, and the other is the background layer behind the pop-up box (the page turns gray). First of all, these two divs are stored together with the code of the original page, but the css attribute display: none is used to hide them first. When the pop-up box effect is triggered, display: block is used to display these two divs. Just come out.
The complete code is as follows:
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'><html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'><title>div+css实现弹出层</title><style> #popBox{ position: absolute; display:none; width:300px; height:200px; left:40%; top:20%; z-index:11; background:#B8F764; } #popLayer{ position: absolute; display:none; width:100%; height:100%; left:0; top:0; z-index:10; background:#DCDBDC; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);/* 只支持IE6、7、8、9 */ } </style><script type="text/javascript"> function popBox(){ var popBox = document.getElementById('popBox'); var popLayer = document.getElementById('popLayer'); popLayer.style.display = "block"; popBox.style.display = "block"; }//end func popBox() function closeBox(){ var popBox = document.getElementById('popBox'); var popLayer = document.getElementById('popLayer'); popLayer.style.display = "none"; popBox.style.display = "none"; }//end func closeBox() </script></head><body><input type="button" name="popBox" value="弹出框" onclick="popBox()" /><div id="popLayer" > 背景层 </div><div id="popBox" > <div><a href="javascript:void(0)" onclick="closeBox()">关闭</a></div> <div>弹出框</div></div></body></html> The rendering is as follows:
Original page:
Pop-up box:
Other things to note: 1 , the upper and lower positions of the two pop-up layers; 2. Transparency setting of the pop-up background layer;
First, both divs must use the position: absolute; attribute, and then use the z-index attribute to set the upper and lower order of the layers. , the larger the value, the higher it is displayed;
Secondly, background transparency requires the use of filters and other functions. The specific code is as follows:
-moz-opacity: 0.8;
opacity:.80;
filter: alpha (opacity=80);/* Only supports IE6, 7, 8, 9 */