点击按钮弹出一个div层

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层的更多相关文章

点击文字弹出一个DIV层窗口代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
点击文字弹出一个DIV层窗口代码【或FORM表单并且获取点击按钮的ID值】
点击不同按钮咨询不同的专家 <?php for($i=1;$i<5;$i++){ $uid=$i; //用户ID ?> <a class="a_click" ...
jquery实现点击按钮弹出层和点击空白处隐藏层
昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){ $('.autoBtn' ...
请写出一段JavaScript代码，要求页面有一个按钮，点击按钮弹出确认框。程序可以判断出用
请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...
jquery点击按钮弹出图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
ExtJs 4.2.1 点击按钮弹出表单的窗口
初学ExtJs,做项目的时候想做一个这样的效果:点击按钮弹出对话框,之前一直是使用EasyUi来做的, EasyUi里有Dialog,用起来很方便,但是现在转移到ExtJs上后,发现没有Dialog这 ...
JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里
JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...
Html ：点击按钮弹出输入框，再次点击进行隐藏
上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
根据juery CSS点击一个标签弹出一个遮罩层的简单示例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

白书P61 - 点集配对问题
白书P61 - 点集配对问题状压DP #include <iostream> #include <cstdio> #include <cstring> using ...
Charles使用问题, iOS7的http代理(http proxy)配置不生效问题
Charles配合iOS7使用时, 发现iOS7的http代理(http proxy)配置不生效, 代理信息写完后, 系统没有自动保存. 解决方法: 将些wifi忽略, 重新连接, 再配置代理就好了.
使用Chrome测试页面响应性
如今我们都知道响应式的意思.作为开发者,我们常常开发一些响应式的应用.有很多工具可以帮助我们完成这个目的.某些人甚至使用付费扩展.然而,我用了一个东西,它就是 Google Chrome 浏览器. ...
未能找到类型或命名空间“Compare”
在用vs2012 .net Framework4.5 Mvc3做一个MVCMusicStore 的例子时,遇到这样一个问题解决办法: 具体原因也不是很清楚,据说是引用Compare做验证时会有二 ...
字典转模型第三方框架---MJExtension
字典转模型第三方框架 Mantle 所有模型都必须继承自MTModel JSONModel 所有模型都必须继承自JSONModel MJExtension 不需要强制继承任何其他类设计框架需要考虑的 ...
linux下的rbenv和rails安裝
今天是周一,我到新公司的第14天,今天继续linux下ruby和rails环境变量的配置. 首先碰到的问题是主要看ubuntu下安装rbenv,ruby,rails开发环境, http://blog ...
后续遍历 java leecode
以前觉得后续遍历最难写,今天看了篇博客http://blog.csdn.net/sgbfblog/article/details/7773103,其实却是我们仔细比较后续遍历和先序遍历,其实后续遍历就 ...
使用Windows Azure创建Windows系统虚拟机-下
如何在创建虚拟机之后登录虚拟机这部分将展示如何登录到虚拟机,所以你可以管理它的设置和你会上面运行的应用程序. 注意: 对于要求和故障排除技巧,请参阅“使用RDP或SSH连接到Azure虚拟机”( C ...
tomcat运行问题解决方法
早上过来遇到一个非常奇怪的问题,运行一个新的项目,运行环境都没问题,可是在调试的时候,总是出错. 错误代码: log4j:WARN No appenders could be found for lo ...
Android实时监听网络状态（2）
在开发android应用时,涉及到要进行网络访问,时常需要进行网络状态的检查,以提供给用户必要的提醒.一般可以通过ConnectivityManager来完成该工作. ConnectivityMana ...

点击按钮弹出一个div层

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

随机推荐

热门专题