<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

<script src="jquery-2.1.3.min.js"></script>

</head>

<script>

function showDiv()

{

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

var mou_head = document.getElementById('mou_head');

Idiv.style.display = "block";

//以下部分要将弹出层居中显示

Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/2+document.documentElement.scrollLeft+"px";

Idiv.style.top =(document.documentElement.clientHeight-Idiv.clientHeight)/2+document.documentElement.scrollTop-50+"px";

//以下部分使整个页面至灰不可点击

var procbg = document.createElement("div"); //首先创建一个div

procbg.setAttribute("id","mybg"); //定义该div的id

procbg.style.background = "#000000";

procbg.style.width = "100%";

procbg.style.height = "100%";

procbg.style.position = "fixed";

procbg.style.top = "0";

procbg.style.left = "0";

procbg.style.zIndex = "500";

procbg.style.opacity = "0.6";

procbg.style.filter = "Alpha(opacity=70)";

//背景层加入页面

document.body.appendChild(procbg);

document.body.style.overflow = "hidden"; //取消滚动条

//以下部分实现弹出层的拖拽效果

var posX;

var posY;

mou_head.onmousedown=function(e)

{

if(!e) e = window.event; //IE

posX = e.clientX - parseInt(Idiv.style.left);

posY = e.clientY - parseInt(Idiv.style.top);

document.onmousemove = mousemove;

}

document.onmouseup = function()

{

document.onmousemove = null;

}

function mousemove(ev)

{

if(ev==null) ev = window.event;//IE

Idiv.style.left = (ev.clientX - posX) + "px";

Idiv.style.top = (ev.clientY - posY) + "px";

}

}

function closeDiv() //关闭弹出层

{

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

Idiv.style.display="none";

document.body.style.overflow = "auto"; //恢复页面滚动条

var body = document.getElementsByTagName("body");

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

body[0].removeChild(mybg);

}

</script>

<body>

<input type="button" onClick="showDiv()" value="这里调用开打一个新的DIV">

<div id="Idiv" style="display:none; position:absolute; z-index:1000; background:#67a3d9;">

<input type="button" value="关闭" onclick="closeDiv();" />

<div id="mou_head" style="width:100px; height=10px;z-index:1001; position:absolute;">这个是用来实现拖层</div>

</div>

</body>

</html>

　　

js 弹出层，以及在javascript里定义层样式的更多相关文章

  1. js弹出层

    js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...

  2. JavaScript学习总结（6）——js弹出框、对话框、提示框、弹窗总结

    一.JS的三种最常见的对话框 [javascript] view plaincopy //====================== JS最常用三种弹出对话框 =================== ...

  3. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  4. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  5. JS弹出浮层

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

  6. js弹出对话框的方法总结

    九种js弹出对话框的方法总结,需要的朋友可以参考一下 [1.最基本的js弹出对话框窗口代码] 这是最基本的js弹出对话框,其实代码就几句非常简单: <script LANGUAGE=" ...

  7. js弹窗 js弹出DIV,并使整个页面背景变暗

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...

  8. 【转】js弹出框、对话框、提示框、弹窗总结

    js弹出框.对话框.提示框.弹窗总结 一.js的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹 ...

  9. js js弹出框、对话框、提示框、弹窗总结

    js弹出框.对话框.提示框.弹窗总结 一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹 ...

随机推荐

  1. Cyclic Nacklace ---hdu3746（循环节，kmp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3746 给你一个字符串,让你在后面加尽量少的字符,使得这个字符串成为一个重复串. abca---添加bc ...

  2. （0）linux下的Mysql安装与基本使用（编译安装）

    一.大致操作步骤 环境介绍: OS:center OS6.5 mysql:5.6版本 1.关闭防火墙 查看防火墙状态:service iptables status 这样就意味着没有关闭. 运行以下命 ...

  3. python collections模块 计数器（counter）

    一.计数器(counter) Counter是对字典类型的补充,用于追踪值的出现次数. ps:具备字典的所有功能 + 自己的功能 把我写入的元素出现的多少次都计算出来 import collectio ...

  4. 创建发布Webservice以及wsimport工具

    一. 通过wsimport生成本地代理调用WebService 1.推荐的访问服务方式 WebService已纳入w3c规范,其他的平台都支持该规范 :J2EE\Php\.NET都支持wsimport ...

  5. C++学习笔记-隐式成员函数

    通过一个例子来复习C++操作符重载及隐式成员函数.MyString类模仿标准string类,简单的实现了构造一个字符串.字符串比较.取单个字符等功能.如下: #ifndef MYSTRING_H_ # ...

  6. Delphi APP 開發入門（十）REST Client 開發

    Delphi APP 開發入門(十)REST Client 開發 分享: Share on facebookShare on twitterShare on google_plusone_share ...

  7. GIt-远程仓库（特性）

    本人拜读了廖雪峰老师关于Git的讲述后整理所得 上一节讲的Git在一个仓库中对于文件进行基本管理和这种和SVN的功能类似, 如果只是在一个仓库里管理文件历史,Git和SVN真没啥区别,并没有体现出Gi ...

  8. HBuilder 详细使用方法 -------------参考 ：http://www.runoob.com/w3cnote/hbuilder-intro.html

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.HBuilder的编写用到了Java.C.Web和Ruby.HBuilder本身主体是由Java编写,它基于Ecl ...

  9. Java：出现错误提示（java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date）

    Java:出现错误提示(java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date) 原因分析: ...

  10. asp.net操作GridView添删改查的两种方法 及 光棒效果

    这部份小内容很想写下来了,因为是基础中的基础,但是近来用的比较少,又温习了一篇,发现有点陌生了,所以,还是写一下吧. 方法一:使用Gridview本身自带的事件处理,代码如下(注意:每次操作完都得重新 ...