JS 点击按钮后弹出遮罩层，有关闭按钮
<!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="点击弹出层" onclick="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;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
</div>
目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。
</div>
</body>
</html>
JS 点击按钮后弹出遮罩层，有关闭按钮的更多相关文章
- JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- div悬浮在屏幕的中间及点击按钮关闭弹出框
#fd { position: fixed; z-index: 999; width: 109px; height: 323px; top: 71%; right: 1%; margin: -50px ...
- jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...
- 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...
- jquery特效（7）—弹出遮罩层且内容居中
上周写了几个小特效,其中有个点击按钮弹出遮罩层的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html&g ...
- Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- JS实现单击按钮后弹出新的窗口页面
点击按钮后,弹出指定大小的页面窗口. 效果图: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- 【JS新手教程】浏览器弹出div层1
JS中,可以弹出一个层来进行提示等作用,方法是利用css样式display样式,当display等于none时,该元素就不会在页面显示出来,而且元素也不会占空间.就是用户触发某些事件时,动态修改该样式 ...
随机推荐
- 黄聪：wordpress如何开启文章格式post format
发现很多“古老”的WordPress主题使用量非常大,虽然部分也在随着WordPress版本的升级而“升级”,只不过是修复了bug而已,wordpress的新特性并没有使用.而且多数国内的wordpr ...
- 黄聪：禁止wordpress版本自动升级的解决方案
在WordPress配置文件中找到wp-config.php,添加如下常量 define( 'AUTOMATIC_UPDATER_DISABLED', true );
- (WPF) MVVM: 动态添加控件及绑定。
比如需要显示一个键盘,里面有各个按键.实现的效果如下: 之前的思路,就是建立一个singleKey的控件,然后在后台用代码动态的添加到父控件里去, 再用代码在后台进行绑定. 这种实现方法并不是真正的M ...
- 不用配置tnsnames.ora,直接通过PL/SQL访问远程数据库
- js复习（一）
一.常用数据框1.alert(""):警告对话框,作用是弹出一个警告对话框 2.confirm(""):确定对话框,弹出一个带确定和取消按钮的对话框--确定返回 ...
- JAVA 根据用户输入数据求某年到某年有多少天
实例: import java.util.*; //求某年到某年有多少天 public class Test{ public static void main(String[] args){ Scan ...
- C++学习30 重载++和--（自增自减运算符）
自增“++”和自减“--”都是一元运算符,它的前置形式和后置形式都可以被重载.请看下面的例子: #include <iostream> #include <iomanip> u ...
- [Java] 02 String的常用方法
public class TestString{ public static void main(String[] args){ String str1 = "123"; Stri ...
- gc 辅助打印信息
cat xx.xml|grep GC <jvm-arg>-XX:+PrintGCDetails</jvm-arg> <jvm-arg>-XX:+PrintGCDat ...
- 单元测试利器之Jtester
http://kiral.iteye.com/blog/900975 名词解释: Junit:众所周知的单元测试. 官方网址:http://junit.sourceforge.net/.Junit从4 ...