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. iOS8新增加的frameworks, 在目前基于7以上开发的情况下, 使用下列sdk要注意设置成optional

    Added frameworks: AVKitCloudKitCoreAudioKitCoreAuthenticationHealthKitHomeKitLocalAuthenticationMeta ...

  2. 常用的MAVEN公共私服

    flex-mojo http://repository.sonatype.org/content/groups/flexgroup flex相关 http://nexus.5amsolutions.c ...

  3. PHP使用SwiftMailer发送邮件

    用到了swiftmailer 的lib库 官方网址:http://swiftmailer.org/ require_once 'lib/swift_required.php';//给我发送邮件func ...

  4. 【解决】Oracle数据库实现ID自增长

    Oracle数据库要实现ID的自增长,需要创建一个序列和触发器来实现,略微有一点点麻烦,但是也是可以解决的. 直接上地址,首先,http://www.wlcrane.com/article.aspx? ...

  5. CentOS设置在同一窗口打开文件夹

    默认情况下,CentOS双击文件夹会打开一个新窗口.这对于习惯Windows的用户会感觉非常别扭.其实,如果用鼠标中键双击文件夹,就不会打开新窗口了.当然,也可以按照如下设置: 1.  打开任意一个文 ...

  6. Codeforces294B - Shaass and Bookshelf(贪心)

    题目大意 给你N本书,每本书由一个厚度t[i](1或者2),宽度w[i],高度都是一样,把一些书竖着放,然后一些书横着放在同一层,就像下图那样放: 问你把所有的书放好之后竖着的书的总厚度是多少? 题解 ...

  7. Jquery Ajax的时候 老是返回到 error，是因为json格式不正规的原因

    Jquery Ajax的时候 老是返回到 error,是因为json格式不正规的原因: 怪不得不执行,原来我返回的是{success:true,id:1} 这种不规则的字符串,不是严格的json格式, ...

  8. 关于Redis的常识（推荐）

    原文出处: https://github.com/springside/springside4/wiki/redis 版本:V3.0.3 2013-8-1 (@江南白衣版权所有,转载请保留出处) 1. ...

  9. Java 随机生成中文姓名，手机号，邮编，住址

    package lovo; import java.util.HashMap; import java.util.Map; /** * 随机生成中文姓名,性别,Email,手机号,住址 * @auth ...

  10. @ContextConfiguration注解说明

    @ContextConfiguration Spring整合JUnit4测试时,使用注解引入多个配置文件单个文件 @ContextConfiguration(Locations="../ap ...