JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> <meta content="jQuery弹出层效果，有关闭按钮，代码简单易懂，你可以随意修改弹出层的参数。" name="description" /> <script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script> <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="点击弹出层" οnclick="ShowDiv('MyDiv','fade')" /> <!--弹出层时背景层DIV--> <div id="fade" class="black_overlay"> </div> <div id="MyDiv" class="white_content"> <div style="text-align: right; cursor: default; height: 40px;"> <span style="font-size: 16px;" οnclick="CloseDiv('MyDiv','fade')">关闭</span> </div> 目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。 </div> </body> </html>

转载于:https://www.cnblogs.com/gzyx1988/p/4674223.html

JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮相关推荐

java在面板中点击按钮后弹出对话框
1 import javax.swing.*; 2 import java.awt.event.*; 3 import java.awt.*; 4 5 public class ShowDIalog ...
案例：文件下载需求：1. 页面显示超链接 2. 点击超链接后弹出下载提示框 3. 完成图片文件下载||中文文件问题
文件下载需求: 1. 页面显示超链接 2. 点击超链接后弹出下载提示框 3. 完成图片文件下载 * 分析: 1. 超链接指向的资源如果能够被浏览器解析,则在浏览器中展示 ...
关闭当前layer弹出层，点按钮再弹出一个layer弹出层
关闭当前layer弹出层,点按钮再弹出一个layer弹出层 yes - 确定按钮回调方法类型:Function,默认:null 该回调携带两个参数,分别为当前层索引.当前层DOM对象.如: laye ...
php 点击文本框弹出时间,点击Input框弹出日期选项
点击text文本框弹出日期选择器 body{margin:0;padding:0;font:14px Verdana, Arial, sans-serif;line-height:200%;} #co ...
asp.net 页面中点击按钮后无反应的解决方法
在使用Asp.net开发BS应用程序的时候,我们经常会用到.net自带的验证控件,所以也会碰到如下情况,在表单中输入内容后,无论内容是否合法,点击按钮后,页面都不会执行提交动作(页面无任何反应),这种 ...
如何实现点击按钮后禁用按钮的功能？
我们在开发应用程序的时候,经常会遇到这样的需求:用户点击按钮后就让按钮不可再点击,这样可以防止因为用户连续点击按钮导致数据重复的问题,那么该如何实现这样的功能呢? 要实现这种功能,可以有以下一些方式: ...
Java日记_17.9.01——点击按钮后，键盘监听失效的原因与解决办法
最近在自学JAVA,听了前辈的安利在做自己的小画板,然后悲剧就发生了,同时添加按钮和键盘监听之后,就产生了如题的问题,一直觉得是自己监听事件注册的不对,改了一天,然后终于找到了原因,真的巨坑啊我觉得q ...
vue中如何实现点击按钮后加载更多数据
一.点击按钮后加载更多的数据显示在 data 中,定义 pageIndex,默认为 1 ,默认展示第一页数据.定义 comments,默认为空数组,里面保存所有的评论数据,代码如下所示: data( ...
element-ui dialog遮罩层在最上层，关掉dialog遮罩层还在
代码中使用了dialog,dialog中点击某个按钮,又嵌套了一个dialog. 导致最外层的dialog出现后一直被遮罩层遮住,点击确定关掉dialog遮罩层还在. element-ui的dialo ...

JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮相关推荐

最新文章

热门文章