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

随机推荐

【svn】server建立以及svn使用
安装好VisualSVN Server后[安装过程看这里],运行VisualSVN Server Manger,下面是启动界面: 好的,下面我来添加一个代码库[Repository],如下图: 按上图 ...
百度分享 ajax 或分页后显示不出问题解决方案
自从用了AJAX后,JS重新加载问题就如家常便饭般层出不穷啊.没有系统学习过js感觉亚历山大. 百度后,还是找到了解决办法. 百度分享创建了一个全局对象window._bd_share_main.通过 ...
An erroroccurred while filtering resources
maven报错: maven An error occurred while filtering resources Maven -> Update Project... resolved th ...
HTML 动态显示系统当前时间
HTML 动态显示系统当前时间: <div id="time"> <script> document.getElementById('time').inne ...
php之利用递归写无限极分类
<?php //无限极分类 //parent 的值,是该栏目的父栏目的id 反之是 /*0 安徽合肥北京海淀中关村上地河北石家庄 */ $area = array( array(' ...
ubuntu install opengrok
总结: 1. 安装jdk和tomcat 2. 安装ctags 3. 解压opengrok.tar.gz包, 然后将source.war复制到tomcat/webapp下面 sudo cp -R ope ...
Kent Beck揭秘Facebook开发部署流程
http://www.infoq.com/cn/news/2013/10/facebook-development-deployment Facebook是世界上最大的社交网站,有超过10亿用户每月至 ...
jQuery取CSS的HEX(16位)颜色值
//IE10以上版本.CHROME.FIREFOX中GRB颜色转HEX颜色值 $.fn.getBackgroundColor = function() { var rgb = $(this).css( ...
BZOJ 3091 城市旅行
Description Input Output Sample Input 4 5 1 3 2 5 1 2 1 3 2 4 4 2 4 1 2 4 2 3 4 3 1 4 1 4 1 4 Sample ...
Oracle开始从Java运行时中移除JAR包
早在2012年8月,在Java平台首席架构师Mark Reinhold宣布模块化项目Jigsaw之后不久,JEP 162这一题为“准备模块化”的提案就指出,在Jigsaw项目中为模块化系统开发的代码不 ...

js点击弹出div层

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

随机推荐

热门专题