使div成为弹出窗口 [英] make a div work as a popup
本文介绍了使div成为弹出窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在设计一个简单的网页.我希望在同一页面上显示一个弹出窗口，就像下面的图像一样.
我不知道该怎么做.如果有人可以给我一些代码，那就太好了.提前致谢.
解决方案
您可以通过一种非常简单的方法将z-index属性保留在div的CSS中，并根据操作隐藏和显示该div用这个 http://jsfiddle.net/b68Xb/327/
< html>< head>< title>灯箱示例</title>< style>.black_overlay {显示:无；位置:绝对；最高:0％;左:0％；宽度:100％;高度:100％;背景颜色:黑色；z-index:1001;-莫兹不透明度:0.8；不透明度:.80;过滤器:alpha(opacity = 80);}.white_content {显示:无；位置:绝对；最高:25％；左:25％；宽度:50％;高度:50％;内边距:16px;边框:16像素纯橙色；背景颜色:白色；z-index:1002;溢出:自动；}</style>
< body>< p>这是主要内容.要显示灯箱，请点击< a href ="javascript:void(0)" onclick ="document.getElementById('light').style.display ='block'; document.getElementById('fade').style.display='block'>此处</a>/p< div id ="light" class ="white_content">这是灯箱内容.< a href ="javascript:void(0)" onclick ="document.getElementById('light').style.display ='none'; document.getElementById('fade').style.display ='none'">关闭</a</div< div id ="fade" class ="black_overlay"></div></body> I am designing a simple webpage. I want to display a popup window in the same page just like the image attached below.
I have no idea how to do this. If anyone can give me some code, it'll be great. Thanks in advance.
解决方案
In a very simple way you can do it keep z-index property in css of div and do hide and show of that div based on actions use this http://jsfiddle.net/b68Xb/327/
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<body>
<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</body>
这篇关于使div成为弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
