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="/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;

}

</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;" id="move">

<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>

</div>

目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。

</div>

</body>

</html>

如果需要随意移动弹窗，可以在<script></script>中加入以下代码：

window.onload = function (){

    var myDiv = document.getElementById("MyDiv");

    var move = document.getElementById("move");

    var bDrag = false;

    var disX = disY = 0;

    move.onmousedown = function (event){

        var event = event || window.event;

        bDrag = true;

        disX = event.clientX - myDiv.offsetLeft;

        disY = event.clientY - myDiv.offsetTop;

        this.setCapture && this.setCapture();

        return false;

    };

    document.onmousemove = function (event){

        if (!bDrag) return;

        var event = event || window.event;

        var iL = event.clientX - disX;

        var iT = event.clientY - disY;

        var maxL = document.documentElement.clientWidth - myDiv.offsetWidth;

        var maxT = document.documentElement.clientHeight - myDiv.offsetHeight;

        iL = iL < 0 ? 0 : iL;

        iL = iL > maxL ? maxL : iL;

        iT = iT < 0 ? 0 : iT;

        iT = iT > maxT ? maxT : iT;

        myDiv.style.marginTop = myDiv.style.marginLeft = 0;

        myDiv.style.left = iL + "px";

        myDiv.style.top = iT + "px";

        return false;

    };

    document.onmouseup = window.onblur = move.onlosecapture = function (){

        bDrag = false;

        move.releaseCapture && move.releaseCapture();

    };

}

点击按钮弹出一个div层的更多相关文章

  1. 点击文字弹出一个DIV层窗口代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  2. 点击文字弹出一个DIV层窗口代码 【或FORM表单 并且获取点击按钮的ID值】

    点击不同按钮咨询不同的 专家 <?php for($i=1;$i<5;$i++){ $uid=$i; //用户ID ?> <a class="a_click" ...

  3. jquery实现点击按钮弹出层和点击空白处隐藏层

    昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

  4. 请写出一段JavaScript代码，要求页面有一个按钮，点击按钮弹出确认框。程序可以判断出用

    请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...

  5. jquery点击按钮弹出图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. ExtJs 4.2.1 点击按钮弹出表单的窗口

    初学ExtJs,做项目的时候想做一个这样的效果:点击按钮弹出对话框,之前一直是使用EasyUi来做的, EasyUi里有Dialog,用起来很方便,但是现在转移到ExtJs上后,发现没有Dialog这 ...

  7. JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  8. Html ： 点击按钮弹出输入框，再次点击进行隐藏

    上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  9. 根据juery CSS点击一个标签弹出一个遮罩层的简单示例

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. CSS——LESS

    去年就初次接触了LESS,并用他制作了一个Less.org的首页页面,但由于CSS的固有模式,没有让自己喜欢上他.由于前段时间学习bootstrap from twitter再次让我接触了这个Less ...

  2. 【转】下载太慢?简单设置让iTunes提速十几倍

    原文网址:http://www.startos.com/mac/ipad/tips/2010120713291.html 今年可以说是苹果欢笑的一年,ipad的发布,iphone4的成功,让用苹果设备 ...

  3. T型架构观点学习

    一.成为T型人才 眼界格局思维要尽可能的开阔,并不断横向开阔,专业能力要尽可能专注,并且纵向上不断加深: 互联网的快速迭代开发和扁平化管理,使单纯管理人才的作用越来越小,除了分配任务和项目管理,在其他 ...

  4. 使用Action、Func和Lambda表达式

    使用Action.Func和Lambda表达式 在.NET在,我们经常使用委托,委托的作用不必多说,在.NET 2.0之前,我们在使用委托之前,得自定义一个委托类型,再使用这个自定义的委托类型定义一个 ...

  5. js模块，类，继承，命名空间，私有属性等相关概念梳理

    js确切的说是一种基于对象的语言,和纯面向对象的语言(比如as)稍微有点区别,js中没有类的概念.虽然有继承但是基于原型的继承.随着前段越来越受重视,jser们利用js的一些特性他们制造出了和纯面向对 ...

  6. linux网站配置文件.htaccess伪静态转换到IIS web.config中

    linux下的php网站放到Windows服务器IIS下.htaccess文件伪静态规则转换.   此办法只适合于linux下的php网站放到Windows服务器IIS下,网站除了主页面正常以外子页面 ...

  7. 初学redux笔记，及一个最简单的redux实例

    categories: 笔记 tags: react redux 前端框架 把初学redux的一些笔记写了下来 分享一个入学redux很合适的demo, 用redux实现计数器 这是从阮一峰老师git ...

  8. Java笔记(四)……常量与变量

    常量 常量表示不会改变的数值. Java中常量的分类: 整数常量:所有整数 小数常量:所有小数 布尔型常量:较为特有,只有两个数值,true false 字符常量:将一个数字字母或者符号用单引号(' ...

  9. iOS真机调试——申请开发者证书

    申请开发者证书 知道了什么是证书,我们现在就开始申请证书了 1. 找到KeyChain钥匙串,在Mac应用里可以找到 2. 在钥匙串的菜单中选择从证书颁发机构请求证书,填写邮件地址,选择储存到磁盘,放 ...

  10. PHP邮箱验证是否有效

    今天一开电脑发现有人在我的主页给我乱留言,所以加了一个邮箱验证. 网上发现一个很巧妙的算法,分享一下: function checkmail($email){ $exp = "^[a-z'0 ...