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. 【C++】命令行Hangman #2015年12月15日 00:20:27

    增加了可以在构造Hangman对象时通过传入参数设定“最大猜测次数”的功能.少量修改.# 2015年12月15日 00:20:22 https://github.com/shalliestera/ha ...

  2. SQL Server触发器以及如何在SQL Server Manager中调试触发器

    ·只有inserted表有数据时,当前操作为insert:·inserted和deleted两张表都有数据时,当前操作为update:·只有deleted表有数据时,当前操作为delete. 1. C ...

  3. 【HTML】Beginner5：List

    1.Order list </ol> numbered 2.Unorder list </ul> bulleted list 3.List item </li> 4 ...

  4. nyoj10 滑雪

    dp[ i][j]=max(四个方向点)+1: 四个方向上的点应该存在,且大于i,j,表示以i,j开始的点最长路径,递归的结束条件不用判断,因为 dp[][]最大数位置肯定 直接结束,随后次大值肯定能 ...

  5. aix 系统运行级别

    运行级别 在操作系统上运行维护之前,或者修改系统运行级别之前,需检查各种不同的运行级别.运行级别是一个软件配置,只允许一组选定的进程存在. 识别系统运行级别 本节描述如何识别系统正运行在什么样的运行级 ...

  6. sqlplus中常用设置参数

    一.各种设置参数解释 转自http://baike.baidu.com/view/1239908.htm Sql*plus是一个最常用的工具,具有很强的功能,主要有: 1. 数据库的维护,如启动,关闭 ...

  7. Codeforces Round #343 (Div. 2) A. Far Relative’s Birthday Cake

    水题 #include<iostream> #include<string> #include<algorithm> #include<cstdlib> ...

  8. [Locked] Unique Word Abbreviation

    Unique Word Abbreviation An abbreviation of a word follows the form <first letter><number&g ...

  9. storm的功能、三大应用

    storm的功能 Storm 有许多应用领域:实时分析.在线机器学习.持续计算.分布式 RPC(远过程调用协议,一种通过网络从远程计算机程序上请求服务). ETL(Extraction-Transfo ...

  10. XXX 用户 is not in the sudoers file. This incident will be reported 的问题解决方案

    说的是,这种问题,是出现在ubuntu系统里. root@SparkSingleNode:/usr/local/jdk# pwd /usr/local/jdk root@SparkSingleNode ...