js点击弹出div层

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

<title>点击后弹出div窗口效果,sky整理收集。 </title>

<style type="text/css">

.mask{position: absolute;

top: 0px;

left: 0px;

filter: alpha(opacity=50);

-moz-opacity:0.5;

opacity:0.5;

background-color: #ffffff;

z-index: 2;

display: none;}

 /*  弹出基本资料div */

div.sample_popup {height:auto; border: 1px solid #327eca; width: 500px;  }

div.menu_form_header{

 background: url('/image/1.jpg') repeat-x;

}

div.sample_popup div.menu_form_header

{

  border-bottom: 0px;

  cursor: default;

   width:100%;

  height:22px;

  line-height: 22px;

  vertical-align: middle;

  text-decoration: none;

  font-family: "Times New Roman", Serif;

  font-weight: 800;

  font-size: 13px;

  color: #206040;

}

div.menu_form_body

{

  width:100%;

  height:150px;

  font-size:12px;

  background-color:#f1f8fe;

}

div.sample_popup input.menu_form_exit

{

  float: right;

  margin: 4px 5px 0px 0px;

  cursor: pointer;

}

/*end:  弹出商品信息div */

    </style>

<script type="text/javascript">

/**************************************************

 * DivWindow.js

 **************************************************/

var DivWindow= function(popup/*最外层div id*/,popup_drag/*拖动div id*/,popup_exit/*退出按钮id*/ ,exitButton/*触发服务器端退出按钮id*/,varwidth,varheight,zindex){

 this.popup =popup ; //窗口名称

  this.popup_drag=popup_drag;

 this.height =varheight ; //窗口高度，并没用来设置窗口高度宽度，用来定位在屏幕的位置

 this.width =varwidth ; //窗口宽度

        this.popup_exit=popup_exit;

        this.exitButton=exitButton;

        this.zindex=zindex;

 this.init = function(){ //初始化窗口

  this.popupShow();

  this.startDrag(); //设置拖动

  this.setCommond(); //设置关闭

  DivWindow.ArrayW.push(document.getElementById(this.popup)); //存储窗口到数组

 };this.init();

};

//存储窗口到数组

DivWindow.ArrayW = new Array();

//字符串连接类

DivWindow.StringBuild = function(){

 this.arr = new Array();

 this.push = function(str){

  this.arr.push(str);

 };

 this.toString = function(){

  return this.arr.join("");

 };

};

//拖动类

DivWindow.Drag = function(o ,oRoot){

 var _self = this;

 //拖动对象

 this.obj = (typeof oRoot != "undefined") ?oRoot : o;

 this.relLeft = 0; //记录横坐标

 this.relTop = 0; //记录纵坐标

 o.onselectstart = function(){

  return false;

 };

 o.onmousedown = function(e){ //鼠标按下

  e = _self.fixE(e);

  _self.relLeft = e.clientX - _self.fixU(_self.obj.style.left);

  _self.relTop = e.clientY - _self.fixU(_self.obj.style.top);

  document.onmousemove = function(e){

   _self.drag(e);

  };

  document.onmouseup  = function(){

   _self.end();

  };

 };

 this.drag = function(e){ //拖动

  e = this.fixE(e);

  var l = e.clientX - this.relLeft;

  var t = e.clientY - this.relTop;

  if (t < 0)

  {

   t = 0; //防止头部消失

  }

  this.obj.style.left = l +"px";

  this.obj.style.top = t +"px";

 };

 this.end = function(){ //结束拖动

  document.onmousemove = null;

  document.onmouseup = null;

 };

 this.fixE = function(e){ //修复事件

  if (typeof e == "undefined") e = window.event;

  return e;

 };

 this.fixU = function(u){ //处理px单位

  return parseInt(u.split("p")[0]);

 };

};

//窗口拖动

DivWindow.prototype.startDrag = function(){

 var obj = document.getElementById(this.popup);

        var drag = document.getElementById(this.popup_drag);

 new DivWindow.Drag(drag,obj);

};

//设定窗口优先级

DivWindow.prototype.setTop = function(){

 document.getElementById(this.popup).onclick =

 document.getElementById(this.popup).onmousedown =

 function(){

  for(var i=0;i<DivWindow.ArrayW.length;i++)

  {

   DivWindow.ArrayW[i].style.zIndex = 1;

  }

  this.style.zIndex = 100;

 };

};

//显示

DivWindow.prototype.popupShow=function()

{       document.getElementById('mask').style.display="block";

        document.getElementById('mask').style.width=window.screen.width +20;

        document.getElementById('mask').style.height=window.screen.width +20;

        var  element      = document.getElementById(this.popup);

        element.style.position   = "absolute";

        element.style.visibility = "visible";

        element.style.display    = "block";

        element.style.width=this.width;

        element.style.height='auto';

        element.style.left = (window.screen.width - this.width)/2+"px";

        //element.style.top  =(window.screen.height-this.height-100)/2+"px";

         element.style.top  =20+"px";

        element.style.zIndex=this.zindex;

}

//设置关闭

DivWindow.prototype.setCommond = function(){

 var _self = this;

 //根对象

 var obj = document.getElementById(this.popup);

 var exit = document.getElementById(this.popup_exit);

 var triggServerEvent=document.getElementById(this.exitButton);

//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。

 //设置关闭

      exit.onclick = function(){

      obj.style.display = "none";

      obj.style.visibility = 'hidden';

                    document.all.mask.style.display='none'//关闭遮罩层

                    triggServerEvent.click();//触发服务器端退出事件

     };

};

</script>

</head>

<body>

<div>

 <input type="button"  id="show" onclick="javascript:new DivWindow('popup','popup_drag','popup_exit','exitButton','500','700',4);"  value='点击弹出窗口'   />

</div>

  <!-- 遮罩层 -->

 <div id="mask"  class="mask">

 </div>

<!-- 弹出基本资料详细DIV层 -->

<div class="sample_popup" id="popup" style="visibility: hidden; display: none;">

<div class="menu_form_header" id="popup_drag">

 <input type="button"  id="popup_exit" value="退出"/>

</div>

<div class="menu_form_body" >

 <div id="popDetail">

 <script >

function unselectall(){

if(document.myform.chkAll.checked){

document.myform.chkAll.checked = document.myform.chkAll.checked&0;

}

}

function CheckAll(form){

for (var i=0;i<form.elements.length;i++){

var e = form.elements[i];

if (e.Name != 'chkAll'&&e.disabled==false)

e.checked = form.chkAll.checked;

}

}

</script>

<form name="myform" method="post" id="myform" action="" >

<input name='id' type='checkbox' onclick='unselectall()' id='id' value='1'> 设计家园

<input name='id' type='checkbox' onclick='unselectall()' id='id' value='2'> 网页教程

<input name='id' type='checkbox' onclick='unselectall()' id='id' value='3'> 酷站欣赏

<input name='id' type='checkbox' onclick='unselectall()' id='id' value='4'> 网页素材

<input name='chkAll' type='checkbox' id='chkAll' onclick='CheckAll(this.form)' value='checkbox'>

全选

</form>

</div>

</div>

</div>

</body>

</html>

js点击弹出div层的更多相关文章

工作当中实际运用（3）——js原生实现鼠标点击弹出div层在点击隐藏
function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...
js弹出div层,弹出层页面底部出现UL出现一条线问题
整个弹出div层,列表满一页时:底部会出现一条横线原因:ul固定写在页面中了解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=" ...
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...
【JS新手教程】浏览器弹出div层1
JS中,可以弹出一个层来进行提示等作用,方法是利用css样式display样式,当display等于none时,该元素就不会在页面显示出来,而且元素也不会占空间.就是用户触发某些事件时,动态修改该样式 ...
js弹出div层内容(按回退键关闭div层及遮罩)
 <div id="newhtml" class="white_content"> <di ...
JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片
1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
jQuery 弹出div层
目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...
JS向右弹出DIV，点击可向左隐藏。我用jquery可以从左下角像右上角隐藏，怎么从做向右隐藏呢？
弹出的DIV如果是绝对定位,就用right固定位子,如果不是就用float:right:Jquery中有个函数animate是自定义动画效果,$("#shou").click(fu ...
点击弹出div内容包括遮罩层
效果: HTML:  <div class="group_add" onclick = "docu ...

随机推荐

C#模拟POST提交表单（二）--HttpWebRequest以及HttpWebResponse
上次介绍了用WebClient的方式提交POST请求,这次,我继续来介绍用其它一种方式 HttpWebRequest以及HttpWebResponse 自认为与上次介绍的WebClient最大的不同之 ...
《zip命令》－linux命令五分钟系列之九
本原创文章属于<Linux大棚>博客. 博客地址为http://roclinux.cn. 文章作者为roc 希望您能通过捐款的方式支持Linux大棚博客的运行和发展.请见“关于捐款” == ...
Jquery 获取日期date()对象
获取JavaScript 的时间使用内置的Date函数完成 var mydate = new Date(); mydate.getYear(); //获取当前年份(2位) mydate.getFull ...
Unity3d脚本的生命周期
接下来,做出一下讲解:最先执行的方法是Awake,这是生命周期的开始,用于进行激活时的初始化代码,一般可以在这个地方将当前脚本禁用:this.enable=false,如果这样做了,则会直接跳转到On ...
js操作Cookie，实现历史浏览记录
/** * history_teacher.jsp中的js,最近浏览名师 * @version: 1.0 * @author: mingming */ $(function(){ getHistory ...
Ubuntu软件包管理命令全面集锦
说明:由于图形化界面方法(如Add/Remove... 和Synaptic Package Manageer)比较简单,所以这里主要总结在终端通过命令行方式进行的软件包安装.卸载和删除的方法. 一.U ...
Python Tutorial 学习(六)--Modules
6. Modules 当你退出Python的shell模式然后又重新进入的时候,之前定义的变量,函数等都会没有了. 因此, 推荐的做法是将这些东西写入文件,并在适当的时候调用获取他们. 这就是为人所知 ...
让LINQ中的查询语法使用自定义的查询方法
使用LINQ时有两种查询语法:查询语法和方法语法查询语法:一种类似 SQL 语法的查询方式方法语法:通过扩展方法和Lambda表达式来创建查询例如: List<, , , }; //查询语 ...
JavaScript的组成—ECMAScript、BOM和DOM
JavaScript 是一种基于 ECMAScript 规范的脚本语言,并在此基础上进行了自己的封装.ECMAScript 不是一种编程语言,仅仅是一种脚本语言规范,由欧洲计算机协会制定和发布,任 ...
Python使用纯真年代数据库qqwry.dat转换物理位置
PS:网上直接找的,贴出来,方便以后随时用,感谢分享的人. #!/usr/bin/python #encoding: utf-8 import socket import codecs import ...

js点击弹出div层

js点击弹出div层的更多相关文章

随机推荐

热门专题