div分层实现网页弹出效果

新建一个网页 在网页上先建一个div

<div id= "div1" 
style="z-index:1; display:block; width:780px; height:329px" runat="server">

   /div>

z-index : 指明是第几层

display：显示还是隐藏

width:宽

height：高

runat="server"：转换成服务器控件

然后再建一个div

<div id= "div2" style="width:790px; height:338px; z-index:2; position:absolute;left:360px; top:66px; background-color:#d6cbc9; display : none ;" runat="server"> 
   /div>

position:absolute:绝对位置

left：左右位置

top：上下位置

background-color：背景颜色

 

 

然后在div1 里拖一个button1 然后在button1里写代码

div2.Style["display"] = "none";

再在div2 里也拖一个button2 然后在button2里写代码

div2.Style["display"] = "block";

这样 运行第一个div 点击button1 即可弹出div2

再在div2里点击button2 即可隐藏div2

我们可以div2中拖一些控件 就可以实现弹出网页的效果