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. sqliteExpert软件使用（创建数据库和表）

    sqliteExpert是sqlite数据库的可视化操作软件,通过该软件可以进行可视化的创建数据库以及表,免去了复杂的建表语句.首先在下面地址下载该软件http://www.ddooo.com/sof ...

  2. 处理Selection对象和Range对象——Word VBA中重要的两个对象

    处理Selection对象和Range对象——Word VBA中重要的两个对象 Word 开发人员参考Selection 对象代表窗口或窗格中的当前所选内容.所选内容代表文档中选定(或突出显示)的区域 ...

  3. SQL_Server2005自动备份与删除—维护计划

    业务背景: 为了方便客户及时自动更新SAP库里面的数据与减少磁盘的空间.所以要在SQL对数据进行自动备份与删除备份.这样可以更加方便管理员的管理,和减少管理员的工作量. 解决思路: 在2005 SQL ...

  4. C#学习：集合、迭代、泛型（1）

    一.System.Collections名称空间下几个接口表征着集合的功能: 1.IEnumerable:表征着迭代功能 public interface IEnumerable { IEnumera ...

  5. 使用Windows Azure创建Windows系统虚拟机-下

    如何在创建虚拟机之后登录虚拟机 这部分将展示如何登录到虚拟机,所以你可以管理它的设置和你会上面运行的应用程序. 注意: 对于要求和故障排除技巧,请参阅“使用RDP或SSH连接到Azure虚拟机”( C ...

  6. ＳＱＬ中CUBE　用法

    转自 http://www.cnblogs.com/dyufei/archive/2009/11/11/2573975.html CUBE 运算符生成的结果集是多维数据集.多维数据集是事实数据(即记录 ...

  7. algorithm@ KMP

    一. KMP算法 KMP算法是一种改进的字符串匹配算法,由D.E.Knuth与V.R.Pratt和J.H.Morris同时发现,简称KMP算法.KMP算法的关键是利用匹配失败后的信息,尽量减少模式串与 ...

  8. windows下svn+apache搭建svn服务器

    使用软件: apache_2.0.55-win32-x86-no_ssl.msi Setup-Subversion-1.5.3.msi TortoiseSVN-1.5.10.16879-win32-s ...

  9. jQuery进行图片预先加载

    /** **将图片加载到内存中,在页面任何位置引用的时候,直接从缓存中读取,提升用户的体验,提高网站的流畅度.** **/ <!DOCTYPE html PUBLIC "-//W3C/ ...

  10. 洛谷P1471 方差

    蒟蒻HansBug在一本数学书里面发现了一个神奇的数列,包含N个实数.他想算算这个数列的平均数和方差. ——by 洛谷; http://www.luogu.org/problem/show?pid=1 ...