js点击弹出div层

时间：2022-04-07 17:14:14
<!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层的更多相关文章

  1. 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  2. js弹出div层&comma;弹出层页面底部出现UL出现一条线问题

    整个弹出div层,列表满一页时:底部会出现一条横线 原因:ul固定写在页面中了 解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=&quot ...

  3. jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

    本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...

  4. 【JS新手教程】浏览器弹出div层1

    JS中,可以弹出一个层来进行提示等作用,方法是利用css样式display样式,当display等于none时,该元素就不会在页面显示出来,而且元素也不会占空间.就是用户触发某些事件时,动态修改该样式 ...

  5. js弹出div层内容&lpar;按回退键关闭div层及遮罩&rpar;

    <!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...

  6. JS 点击弹出图片&sol; 仿QQ商城点击左右滚动幻灯片&sol; 相册模块，点击弹出图片，并左右滚动幻灯片

    1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  7. jQuery 弹出div层

    目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...

  8. JS向右弹出DIV，点击可向左隐藏。我用jquery可以从左下角像右上角隐藏，怎么从做向右隐藏呢？

    弹出的DIV如果是绝对定位,就用right固定位子,如果不是就用float:right:Jquery中有个函数animate是自定义动画效果,$("#shou").click(fu ...

  9. 根据图中的盲点坐标，弹出div层

    <div class="map_r" id="mapinfo" style="position: absolute; top: 20px; le ...

随机推荐

  1. 没有body怎么添加onload事件

    <script type="text/javascript"> window.onload = function () { setup(); } </script ...

  2. 将JsonObject转换成HashMap

    1.工具类: Utils.class: (1)简单的键值对map public class Utils { public static String getRaw(Context context, i ...

  3. bootcamp

    为了鄙社自主研发的html5studio和mist,我给Air划了32G装windows囧 第一要注意的是,必须使用bootcamp划分将要安装windows的分区,不要在windows安装过程中删除 ...

  4. Java增强的泛型

    尽管Java 8是2014年年初才发布的,而Java 9要等到2016年年中,但是目前有一些计划放到某个未来版本(希望是Java 10)中的特性已经合并了进来. 具体而言,有两个比较大的特性已经开始原 ...

  5. BAE3&period;0搭建wordpress注意

    仅仅是mark一个注意的点,数据库连接时,主机是: /** MySQL主机 */ define('DB_HOST', 'sqld.duapp.com:4050');

  6. Sublime text追踪函数插件

    Sublime Text2/3怎样在Ubuntu中配置CTags插件 | 浏览:1278 | 更新:2014-03-05 10:34 1 2 3 4 5 6 7 分步阅读 本文详解在Ubuntu Li ...

  7. 【阿里聚安全&&num;183&semi;安全周刊】 全美警局已普遍拥有破解 iPhone 的能力 &vert; 女黑客破解任天堂Switch，称硬件漏洞无法修复

    本周的七个关键词: 破解 iPhone丨 女黑客破解任天堂丨假的身份证 丨 扫黄打非丨华盛顿特区发现手机间谍设备 丨 Telegram被俄罗斯监管机构告上法庭丨价值5万美金的Firefox浏览器漏洞 ...

  8. 【转载】MapReduce编程 Intellij Idea配置MapReduce编程环境

    目录(?)[-] 一软件环境 二创建maven工程 三添加maven依赖 四配置log4j 五启动Hadoop 六运行WordCount从本地读取文件 七运行WordCount从HDFS读取文件 八代 ...

  9. opencv 基本使用

    1.下载opencv库 https://opencv.org/ 下载后文件: 双击提取文件到指定路径: * 下载winpack版本可以省去自己编译的步骤,下载后无需安装双击可以直接提取文件到指定目录: ...

  10. datagrid行内编辑时为datetimebox

    $.extend($.fn.datagrid.defaults.editors, { datetimebox: {// datetimebox就是你要自定义editor的名称 init: functi ...

相关文章