如何在页面中添加一个自定义的小窗口

_Slience_ 2014-09-26 11:49:25
如图:
要实现的效果:在大窗口中能添加的东西(图片啊,文字什么的)都能添加到小窗口中;小窗口显示的时候后面的大窗口有一层蒙版(就像图中那样,可以突出小窗口),而后点击小窗口外面的任何一个地方小窗口自动消失
求一个小小的例子,如果能有一点文字说明就更好了,哪怕有大神说说思路我也会很感激的
对了,本人小百,只能说看得懂javascript,没有看过jquery,所以如果有jquery的东东。。。额
...全文
134 1 打赏 收藏 举报
写回复
1 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
<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>
  • 打赏
  • 举报
回复
相关推荐
发帖
CSS

6.1w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
帖子事件
创建了帖子
2014-09-26 11:49
社区公告
暂无公告