jQuery实现弹出层效果

###jQuery实现弹出层效果

点击弹出层：弹出弹出层
点击阴影：关闭弹出层
点击“关闭”关闭弹出层

整体代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery弹出层效果</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: 10%;left: 10%;width: 80%;height: 80%;border: 16px solid lightblue;background-color: white;z-index: 1002;overflow: auto;}.white_content_small {display: none;position: absolute;top: 20%;left: 30%;width: 40%;height: 50%;border: 16px solid lightblue;background-color: white;z-index: 1002;overflow: auto;}</style><script type="text/javascript">//弹出隐藏层function ShowDiv(show_div, bg_div) {document.getElementById(show_div).style.display = 'block';document.getElementById(bg_div).style.display = 'block';var bgdiv = document.getElementById(bg_div);bgdiv.style.width = document.body.scrollWidth;// bgdiv.style.height = $(document).height();$("#" + bg_div).height($(document).height());};//关闭弹出层function CloseDiv(show_div, bg_div) {document.getElementById(show_div).style.display = 'none';document.getElementById(bg_div).style.display = 'none';};</script>
</head><body><input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" /><!--弹出层时背景层DIV--><div id="fade" class="black_overlay"  onclick="CloseDiv('MyDiv','fade')"></div><div id="MyDiv" class="white_content"><div style="text-align: right; cursor: default; height: 40px;"><span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span></div>目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。</div>
</body></html>

jQuery实现弹出层效果相关推荐

jquery简单实现点击弹出层效果实例
先看效果图: 完整例子:  <div id="race"><a href="#">点击</ ...
非常漂亮的仿腾讯弹出层效果
2019独角兽企业重金招聘Python工程师标准>>> 非常漂亮的仿腾讯弹出层效果 http://www.jscode.cn/js/v45300 jquery弹出层插件-jquery ...
html 5 桌面弹窗,HTML5+CSS3+jQuery实现弹出层
我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可以在桌面PC ...
Linux程序实现弹框,jQuery实现弹出框效果绝对美观
使用到JQeury写的几个比较好的Popup DialogBox,觉得不错.和大家分享下.使用它们结合.net可以实现很好的效果. 1.jqpopup: 是个可以拖拽,缩放并可以在它上面显示html页 ...
CSSJS弹出层效果,兼容所有浏览器
直接上DEMO,不过IE中会提示加载ActiveX控件! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN&q ...
css外层DIV半透明内层div不透明-弹出层效果的实现
css外层DIV半透明内层div不透明-弹出层效果的实现 <!DOCTYPE html> <html><head><meta charset="ut ...
一个简单的遮罩弹出层效果
为什么80%的码农都做不了架构师?>>> 打酱油的日子就是要多学习下,最近在学写JS类库,虽然有面对对象语言的基础,但是感觉入手前端还是压力很大,就JS来说,干了半年了,水准还 ...
layui弹出层html,layui弹出层效果实现代码
本文实例为大家分享了layui弹出层的具体代码,供大家参考,具体内容如下弹出层大部分演示都在layer独立组件的官网,与内置的layer模块,用法是完全一致的特殊例子 Tips:为了更清晰演示, ...
JQuery 操作弹出层 iframe页面元素的方式
一.问题描述:如下图,在某个页面弹出一个iframe页面A,再在A弹出一个iframe页面B,需要操作这个B页面的元素 (一)图述图1 (2)A页面的弹出方法,其中simpleDialog是封装好的 ...

jQuery实现弹出层效果

jQuery实现弹出层效果相关推荐

最新文章

热门文章

jQuery实现 弹出层效果

jQuery实现 弹出层效果相关推荐

最新文章

热门文章

jQuery实现弹出层效果

jQuery实现弹出层效果相关推荐