61,128
社区成员
发帖
与我相关
我的任务
分享如何在页面中添加一个自定义的小窗口
如图：
要实现的效果：在大窗口中能添加的东西（图片啊，文字什么的）都能添加到小窗口中；小窗口显示的时候后面的大窗口有一层蒙版（就像图中那样，可以突出小窗口），而后点击小窗口外面的任何一个地方小窗口自动消失
求一个小小的例子，如果能有一点文字说明就更好了，哪怕有大神说说思路我也会很感激的
对了，本人小百，只能说看得懂javascript，没有看过jquery，所以如果有jquery的东东。。。额
要实现的效果：在大窗口中能添加的东西（图片啊，文字什么的）都能添加到小窗口中；小窗口显示的时候后面的大窗口有一层蒙版（就像图中那样，可以突出小窗口），而后点击小窗口外面的任何一个地方小窗口自动消失
求一个小小的例子，如果能有一点文字说明就更好了，哪怕有大神说说思路我也会很感激的
对了，本人小百，只能说看得懂javascript，没有看过jquery，所以如果有jquery的东东。。。额
...全文
请发表友善的回复…
发表回复
程序员鼓励师 2014-09-27
- 打赏
- 举报
<html>
<head>
<title>效果</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>
</head>
<body>
<p>可以根据自己要求修改css样式<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>
</html>
