css弹出遮罩层
2015-07-29 14:51
246 查看
说明:需要jquery支持,支持IE8+,googlechrome,firefox,话不多说,上代码。
html:
css:.
js:
html:
[code] <input type="button" onclick="showMaskShadow()" value="弹出遮罩层" /> <!-- 弹出查看图片窗口 begin --> <div class="bgDiv"></div> <div class="contentDiv"> <input type="button" onclick="hideMaskShadow()" value="点我隐藏" /> <h2>您可以在这里自定义内容</h2> </div> <!-- 弹出查看图片窗口 end-->
css:.
[code] /** * 弹出div窗口样式 **/ .bgDiv { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.7; opacity: .70; filter: alpha(opacity = 70); } .contentDiv { display: none; position: absolute; top: 1%; left: 1%; width: 95%; height: 93%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index: 1002; overflow: auto; text-align: center; }
js:
[code] // 弹出遮罩层 function showMaskShadow(){ $('.bgDiv').show(); $('.contentDiv').show(); } // 隐藏遮罩层 function hideMaskShadow() { $('.bgDiv').hide(); $('.contentDiv').hide(); }
相关文章推荐
- css3复选框
- Emmet:HTML/CSS代码快速编写神器
- css3鼠标状态
- css3列表属性
- CSS代码优化7个准则
- html css一些记录
- css 实现垂直居中的5种方法
- 前端性能优化(CSS动画篇)
- 去掉chrome 浏览器 input textarea 获取焦点后边框
- css文字样式
- 静态Web开发 CSS
- 使用CSS样式position:fixed水平滚动的方法
- 一款很漂亮的CSS3登录界面
- css中的选择器
- 去除inline-block元素间间距的N种方法
- CSS常用属性
- 【jetty】jetty作为maven插件,解除JS/CSS等静态文件锁定
- CSS布局页面之盒子模型
- 样式表的重置
- CSS中的长度单位