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 ...

随机推荐

Flightgear 编译
一.FlightGear简介 FlightGear 始于1997年,是一个开源的多平台飞行模拟器. 二.FlightGear编译过程 FlightGear平台的说明文档见:http://wiki.fl ...
VC++读取资源中文件
//查找目标资源 HRSRC hResource = FindResource(GetModuleHandle(NULL), MAKEINTRESOURCE(IDR_MAINPROG), TEXT(& ...
Centos JAVA Eclipse
wget http://download.oracle.com/otn-pub/java/jdk/8u5-b13/jdk-8u5-linux-i586.tar.gz vi /etc/profile 在 ...
JSP中用include标签动态引入其它文件报错
<jsp:include page="<%=path %>/include.jsp"></jsp:include> 报错:attribute f ...
分数拆分（ Fractions Again， UVA 10976）-ACM
It is easy to see that for every fraction in the form (k > 0), we can always find two positive i ...
smarty中判断一个变量是否存在于一个数组中或是否存在于一个字符串中？
smarty支持php的系统函数可以直接使用{if in_array($str, $arr) || strpos($str, $string)} yes {else} no{/if}
php基础知识【函数】（6）mysql数据库
一.连接和关闭 1.mysql_connect('example.com:3307', 'root', '123456') --打开一个到 MySQL 服务器的非永久连接 2.mysql_pconne ...
Linux 环境下自动化测试工具，Redhat dogtail的安装
dogtail基于Accessibility(a11y)的GUI图形界面测试工具和自动化框架可以与linux桌面应用程序进行交互操作. dogtail是用Python语言写的.dogtail的测试脚本 ...
const关键字与指针
const与指针在一起的几种情况. const int *p1; //表示p1本身不是const,指向的变量是const. const *int p2; //语法错误 int const *p3; / ...
在uboot上创建菜单
一.原理菜单其实就是一个uboot中的命令,和其他的命令没有什么差别. uboot启动时,如果进入uboot命令模式,先运行这个命令,就会打印出一个菜单界面. 在uboot的命令模式,通过键入“m ...

js点击弹出div层

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

随机推荐

热门专题