js实现弹出DIV层窗口

合集下载

htmljs点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码

htmljs点击按钮滚动跳转定位到页⾯指定位置（DIV）的⽅法代码⼀：通过html锚点实现滚动定位到页⾯指定位置（DIV）：如果我们要点击实现跳转的地⽅是⼀个html锚点，也就是点击⼀个A标签超链接实现跳转，可以把A标签的href属性直接指向跳转指定位置的div，代码实现思路如下：<a class="banner" href="/schoolFair/registration#nav"><a href="#abc">点击跳转</a><div id="abc">将要跳转到这⾥</div>⼆：通过点击button按钮使⽤js实现滚定跳转到页⾯指定位置（DIV）：如果我们要点击实现跳转的地⽅是⼀个button按钮的话，由于button不能添加href，所以我们只好使⽤js跳转代码来实现，具体代码⽰例如下：<script>function onTopClick() {window.location.hash = "#abc";}</script><input type="button" name="Submit" value="提交" onclick="javascript:onTopClick();" /><div id="abc">跳转到的位置</div>上⾯这段代码，点击提交按钮，将会滚定跳转定位到同⼀页⾯id="abc"的div处。

这段js点击跳转页⾯代码实现的原理是：页⾯各元素赋予唯⼀ID，点击提交按钮触发js点击事件，js通过ID滚动跳转定位到该元素，window.location.hash = "#abc"指的就是定位到当前页⾯id="abc"的div。

js控制div弹出层实现方法

js控制div弹出层实现⽅法本⽂实例讲述了js控制div弹出层实现⽅法。

分享给⼤家供⼤家参考。

具体分析如下：这是个功能很好，且容易调⽤和控制的弹出层。

感兴趣的朋友可以调试运⾏⼀下看看效果如何~O(∩_∩)O~<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>弹出窗⼝(可拖动，背景灰⾊透明)</title><script type="text/javascript"></script></head><body><table width="600" border="0" cellspacing="0" cellpadding="0"><tr ><td height="100" align="center" ><p><a href="javascript:AlertMsg("温馨提⽰",'')">点我试试!</a></p> </td></tr></table></div></body></html>希望本⽂所述对⼤家的javascript程序设计有所帮助。

用DIV实现弹出窗口

用DIV实现弹出窗口弹出窗口是一种常见的网页设计元素，它可以在当前网页中打开一个新的浮动窗口，显示更多的内容或者提供额外的功能。

这种技术通常使用DIV元素配合HTML、CSS和JavaScript进行实现。

以下是一个使用DIV 实现弹出窗口的例子，介绍了实现过程和一些注意事项。

<div class="popup-container"><button id="popup-button">弹出窗口</button><div id="popup" class="popup"><div class="popup-content"><button id="close-button">关闭</button><h2>弹出窗口示例</h2><p>这是一个使用DIV实现的弹出窗口示例。

</p></div></div></div>CSS代码：.popup-containerposition: relative;.popupdisplay: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 400px;padding: 20px;background-color: #fff;box-shadow: 0 0 10px rgba(0,0,0,0.3);border-radius: 5px;.popup-contenttext-align: center;JavaScript代码：document.getElementById("popup-button").addEventListener("click", functiodocument.getElementById("popup").style.display = "block";});document.getElementById("close-button").addEventListener("click", functiodocument.getElementById("popup").style.display = "none";});以上代码使用了一个包含弹出窗口内容的DIV元素，并设置了相关的CSS样式。

用JS制作9种弹出小窗口(HTML)

进入许多网站时，有弹出式小窗口，它们五花八门，使我们捉摸不透下面就来介绍用JS制作9种制作弹出小窗口：1、最基本的弹出窗口代码其实代码非常简单：< SCRIPT LANGUAGE="javascript">< !--window.open ("page.html")-->< /SCRIPT>因为这是一段Javascript代码，所以它们应该放在< SCRIPT LANGUAGE="javascript">之间。

< !-- 和-->是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。

要养成这个好习惯啊。

window.open ("page.html") 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。

用单引号和双引号都可以，只是不要混用。

这一段代码可以加入HTML的任意位置，< head>和< /head>之间可以，< body>间< /body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。

也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。

2、经过设置后的弹出窗口下面再说一说弹出窗口的设置。

只要再往上面的代码中加一点东西就可以了。

我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。

< SCRIPT LANGUAGE="javascript">< !--window.open ("page.html", "newwindow", "height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no")  //写成一行-->< /SCRIPT>参数解释：< SCRIPT LANGUAGE="javascript"> js脚本开始；window.open 弹出新窗口的命令；"page.html" 弹出窗口的文件名；"newwindow" 弹出窗口的名字（不是文件名），非必须，可用空"代替；height=100 窗口高度；width=400 窗口宽度；top=0 窗口距离屏幕上方的象素值；left=0 窗口距离屏幕左侧的象素值；toolbar=no 是否显示工具栏，yes为显示；menubar，scrollbars 表示菜单栏和滚动栏。

JS实现DIV高度自适应窗口示例

JS实现DIV⾼度⾃适应窗⼝⽰例本⽂实例讲述了JS实现DIV⾼度⾃适应窗⼝。

分享给⼤家供⼤家参考，具体如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title></title><style type="text/css">*.{margin: 0;padding: 0;}</style><script type="text/javascript">window.onload = windowHeight; //页⾯载⼊完毕执⾏函数function windowHeight() {var h = document.documentElement.clientHeight; //获取当前窗⼝可视操作区域⾼度var bodyHeight = document.getElementById("divContent"); //寻找ID为content的对象bodyHeight.style.height = (h - 25) + "px"; //你想要⾃适应⾼度的对象}setInterval(windowHeight, 500)//每半秒执⾏⼀次windowHeight函数</script></head><body><form id="form1" runat="server"><div id="divContent" style="background-color: Gray;border:1px solid blue;">Test</div></form></body></html>PS:⾼度⾃适应应⽤⼴泛，本站的很多在线⼯具也使⽤了这⼀技巧，列举如下⼏个⼯具供⼤家参考：更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。

利用JS做到隐藏div和显示div

利⽤JS做到隐藏div和显⽰divdiv的visibility可以控制div的显⽰和隐藏，但是隐藏后页⾯显⽰空⽩Js代码1. style="visibility: none;"2.3. document.getElementById("typediv1").style.visibility="hidden";//隐藏4.5. document.getElementById("typediv1").style.visibility="visible";//显⽰通过设置display属性可以使div隐藏后释放占⽤的页⾯空间如下Js代码1. style="display: none;"2.3. document.getElementById("typediv1").style.display="none";//隐藏4.5. document.getElementById("typediv1").style.display="";//显⽰此JS代码中，没有⽤try——Catch捕获错误，代码如下：Js代码1. <script language="javascript">2. //创建⼀个showhidediv的⽅法，直接跟ID属性3. function showhidediv(id){4. var sbtitle=document.getElementById(id);5. if(sbtitle){6. if(sbtitle.style.display=='block'){7. sbtitle.style.display='none';8. }else{9. sbtitle.style.display='block';10. }11. }12. }13. </script><div id="show" onMouseMove='showhidediv("msg")';>⿏标移动这⾥</div> <div id="msg" >出现显⽰的内容</div> onMouseMove='showhidediv("msg")'; 这⾥是⿏标动作，可以替换成Click或其他！做两个层之间的切换：Js代码1. <script language="javascript">2. //创建⼀个showhidediv的⽅法，直接跟ID属性3. function showhidediv(id){4. var age=document.getElementById("msg_2");5. var name=document.getElementById("msg_1");6. if (id == 'name') {7. if (name.style.display=='none') {8. age.style.display='none';9. name.style.display='block';10. }11. } else {12. if (age.style.display=='none') {13. name.style.display='none';14. age.style.display='block';15. }16. }17. }18. </script>19. <div id="show" style="float:left;" onMouseMove='showhidediv("name")';>Name：</div><div id="show" style="float:left;" onMouseMove='showhidediv("age")';>Age：</div>20. <div id="msg_1" style="display:none;float:left;">林⾬林</div>21. <div id="msg_2" style="display:none;float:left;">18</div>//⽰例⼆显⽰⼀个层的同时隐藏另⼀个层Html代码1. <html>2.3. <head>4.5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />6.7. <title>⽆标题⽂档</title>8.9. <script language="JavaScript" type="text/JavaScript">10.11. 44.45. </script>46.47. </script>48.49. </head>50.51. <body>52.53. <div id="msg_1" style="display:block;float:left;" onclick='showhidediv("age")';>54.55. <p id="photoTitle" >单击此处添加描述</p></div>56.57. <div id="msg_2" style="display:none;float:left;" >58.59. <form id="">60.61. <textarea class="textarea" id="" name=""></textarea>62.63. <div class="">64.65. <input type="button" value="保存" class="" id="">66.67. <input type="button" value="取消" class="" id="" onclick='showhidediv("name")';>68.69. </div>70.71. <input type="hidden" name="" value=""></form>72.73. </div>74.75. </body>76.77. </html>。

弹出层

div弹出层，我没有点击事件，是页面一加载就弹出来，你也可以改成$("#id").click(fun ction(){});放这里面就可以点击某个id事件来弹出层了，上预览图：页面加载完成时：当验证码得到焦点时：实现这个ajax为了节约时间，用户名/密码/验证码我都没判断是否为空，我也没用数据库，登录用户名和密码都是admin登录成功时：这里说明一下，由于时间有限，你可以把这个登录成功或者登录失败，效果做一下，直接在登录窗口上放一个<div id="message"><div>然后设置其样式，把提示内容追加上去，根据自己个人需求来，下面贴我的全部代码：静态页面login.html代码如下图所示：login.html1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht tp:///TR/xhtml1/DTD/xhtml1-transitional.dtd">2<html xmlns="/1999/xhtml">3<head>4<title>mydream_后台登录</title>5<link href="css/login.css" rel="stylesheet" type="text/css"/> 6<script src="../js/jquery-1.4.1-vsdoc.js" type="text/javascrip t"></script>7<script src="js/login.js" type="text/javascript"></script>8</head>9<body>10<div id="login" class="login">11<div class="title"><b>管理员登录</b></div>12<div class="pad">13<div><p class="selectinput loginpsw"><label>用户名：</label><inputtype="text" tabindex="1" class="txt" size="36" name="username" id="tx tName"/></p></div>14<div><p class="selectinput loginpsw"><label>密   码：</label><input type="password" tabindex="1" class="txt" size="36" name="password" id="txtPassword"/></p></div>15<div><div><p class="selectinput loginpsw"><label>验证码：</label>< input type="text" tabindex="1" class="txt" size="36" name="code" id=" txtCode"/></p></div></div>16<div><input id="btnLogin" type="button" value="登录"/></div>17</div>18<div class="divCode"><img alt="验证码" title="点击刷新验证码" src= "../ashx/verifyCode.ashx"/></div>19</div>20</body>21</html>login.html层叠样式表login.css代码如下所示：login.css1.selectinput{margin-bottom:10px;width:224px;height:20px;background -color:#FFF;border:1px solid;border-color:#999 #CCC #CCC #999;}2.selectinput .txt{float:left;width:165px;border:none;}3.loginpsw label{float:left;display:inline;margin:0 0 0 4px;width:50px;height:auto;line-height:150%; color:#339900}4body,td,input,textarea,select,button{color:#666;font:12px/1.6em Ve rdana,Helvetica,Arial,sans-serif;}5input,select,button{vertical-align:middle;}6.txt,.txtarea{padding:2px;*padding:0 2px;height:16px;*height:20px; border:1px solid;border-color:#999 #CCC #CCC #999;background:#FFF;}7body{ margin:0 auto;}8.login{border:solid 3px #339900; width:360px; height:223px;display: none; z-index:101;position:absolute; background-color:#FFFFFF;}9.login .title{width:100%;height:30px;line-height:30px; border-bott om:solid 1px #339900;}10.login .title b{ padding-left:5px; color:#000000;}11.login .pad{padding-left:35px;}12.login .divCode{width:80px; height:30px;position:relative;top: -32 px;left:170px; display:none;}13.login #btnLogin{width:55px; height:28px;}14#greybackground{background:#000000;width:100%; display:block; z-in dex:100; top:0px; left:0px; position:absolute;}login.html页面所需js文件login.js代码如下所示：login.js1/// <reference path="/js/jquery-1.4.1-vsdoc. js" />2 $(document).ready(function() {3var screenwidth, screenheight, mytop, getPosLeft, getPosTop4 screenwidth = $(window).width();5 screenheight = $(window).height();6//获取滚动条距顶部的偏移7 mytop = $(document).scrollTop();8//计算弹出层的left9 getPosLeft = screenwidth / 2 - 200;10//计算弹出层的top11 getPosTop = screenheight / 2 - 150;12//css定位弹出层13 $("#login").css({ "left": getPosLeft, "top": getPosTop });14//当浏览器窗口大小改变时15 $(window).resize(function() {16 screenwidth = $(window).width();17 screenheight = $(window).height();18 mytop = $(document).scrollTop();19 getPosLeft = screenwidth / 2 - 200;20 getPosTop = screenheight / 2 - 150;21 $("#login").css({ "left": getPosLeft, "top": getPosTop + m ytop });22 });23//当拉动滚动条时，弹出层跟着移动24 $(window).scroll(function() {25 screenwidth = $(window).width();26 screenheight = $(window).height();27 mytop = $(document).scrollTop();28 getPosLeft = screenwidth / 2 - 200;29 getPosTop = screenheight / 2 - 150;30 $("#login").css({ "left": getPosLeft, "top": getPosTop + m ytop });31 });32//失去焦点与得到焦点33 $("#txtCode").focus(function() {34 $(".divCode").fadeIn(1200);35 });36 $("#txtCode").blur(function() {37 $(".divCode").fadeOut();38 });39 $("#login").fadeIn("slow"); //toggle("slow");40//获取页面文档的高度41var docheight = $(document).height();42//追加一个层，使背景变灰43 $("body").append("<div id='greybackground'></div>");44 $("#greybackground").css({ "opacity": "0.1", "height": docheig ht });45//登录46 $("#btnLogin").click(function() {47 $.get("../ashx/login.ashx",48 { name: $("#txtName").val(),49 pwd: encodeURIComponent($("#txtPassword").val()),50 code: $("#txtCode").val()51 },52function(data) {53switch (data) {54case "code error":55 alert("验证码错误！");56break;57case "success":58 alert("登录成功！");59break;60case "false":61 alert("登录失败！");62break;63default:64 alert("数据加载失败，请稍后再试！");65break;66 }67 });68 });69 });login.html交互的后台cs文件login.ashx代码如下所示：login.ashx1 <%@ WebHandler Language="C#" Class="login" %>23using System;4using System.Web;5using System.Web.SessionState;67public class login : IHttpHandler, IRequiresSessionState8 {9public void ProcessRequest(HttpContext context)10 {11string code = context.Request.QueryString["code"];12 context.Response.ContentType = "text/plain";13if (code.ToLower() != context.Session["checkCode"].ToStrin g())14 {15 context.Response.Write("code error");16 }17else18 {19string name = context.Request.QueryString["name"];20string pwd = HttpUtility.UrlDecode(context.Request.Que ryString["pwd"]);21if (name == "admin" && pwd == "admin")22 {23 context.Response.Write("success");24 }25else26 {27 context.Response.Write("false");28 }29 }30 }3132public bool IsReusable33 {34get35 {36return false;37 }38 }3940 }login.html页面验证码文件verifyCode.ashx代码如下所示：verifyCode1 <%@ WebHandler Language="C#" Class="verifyCode" %>23using System;4using System.Web;5using System.Web.SessionState;//第一步导入命名空间6using System.Drawing;78public class VerifyCode : IHttpHandler, IRequiresSessionState 9 {//第二步实现接口就和平常一样可以使用session1011public void ProcessRequest(HttpContext context)12 {13string checkCode = this.CreateRandomCode(4).ToLower();14 context.Session["checkCode"] = checkCode;15this.CreateImage(context, checkCode);16 }1718public bool IsReusable19 {20get21 {22return false;23 }24 }2526///<summary>27///按位生成随机28///</summary>29///<param name="codeCount"></param>30///<returns></returns>31private string CreateRandomCode(int codeCount)32 {33int number;34string checkCode = String.Empty;35 Random random = new Random();36for (int i = 0; i < codeCount; i++)37 {38 number = random.Next(100);39switch (number % 3)40 {41case0:42 checkCode += ((char)('0' + (char)(number % 1 0))).ToString();43break;44case1:45 checkCode += ((char)('a' + (char)(number % 2 6))).ToString();46break;47case2:48 checkCode += ((char)('A' + (char)(number % 2 6))).ToString();49break;50default:51break;52 }53 }54return checkCode;55 }5657///<summary>58///根据字符生成图片59///</summary>60///<param name="context"></param>61///<param name="checkCode"></param>62private void CreateImage(HttpContext context,string checkCode) 63 {64int randAngle = 45;//随机转动角度65int iwidth = (int)(checkCode.Length * 23);66//封装GDI+ 位图，此位图由图形图像及其属性的像素数据组成，指定的宽度和高度。

htmlcssjs-layer弹出层的初次使用

htmlcssjs-layer弹出层的初次使⽤学习前端有时很多时候要⽤到弹出层，原⽣的js写有些⿇烦，⽽且不美观，基于jQuery的弹出层组件layer应运⽽⽣，近些年来备受青睐。

官⽹上有使⽤教程，但当初⽤的时候还是糊⾥糊涂，今天来记录⼀下layer组件的步骤1step:新建⼀个html⽂件，并引⼊下载好的jQuery和layer.js。

2step: 码字1<!doctype html>2<html>3<meta charset="utf-8">4<head>5<title></title>6<style>78</style>910<script src="../jquery-3.3.1.js"></script>1112<script src="../layer例⼦/layer-v3.1.1/layer/layer.js"></script>13</head>14<body>15<div style="width:1000px;height:1000px;margin:auto;border:1px solid #999;">16<button style="width:70px;height:40px;float:left;font-size:13px;line-height:20px;text-align:center;" onClick="openRegister()">点击我</button>17</div>181920<div style="display:none;padding:30px;" id="registerlayer">21<span style="color:#999;font-size:25px;float:left">注册</span>22<span style="color:#999;font-size:13px;float:right;margin:10px 0 0 0;" class="hover3" onClick="goLogin()">快速登录</span>23<div style="width:298px;height:138px;float:left;border:1px solid #ccc;margin:30px 0 0 0;">24<input style="width:294px;height:42px;border:1px solid #fff;border-bottom:1px solid #ccc;" type="text" placeholder="注册新⽤户">25<input style="width:294px;height:42px;border:1px solid #fff;border-bottom:1px solid #ccc;" type="password" placeholder="请设置密码">26<input style="width:294px;height:42px;border:1px solid #fff;" type="password" placeholder="请确认密码">27</div>28<input style="margin:20px 0 0 0;float:left;" type="checkbox" id="registerAgree" checked="checked">29<span style="margin:18px 0 0 0 ;float:left;font-size:12px;color:#999;"> 我已阅读并接受鹦鹉⽹</span>30<span style="margin:18px 0 0 0 ;float:left;font-size:12px;color:#069;" class="hover4">《服务协议》</span>31<span style="margin:18px 0 0 0 ;float:left;font-size:12px;color:#999;">和</span>32<span style="margin:18px 0 0 0 ;float:left;font-size:12px;color:#069;" class="hover4">《账户协议》</span>33<div style="width:298px;height:40px;float:left;background:#6FAC22;margin:30px 0 0 0;text-align:center;line-height:40px;font-size:16px;" id="register">注      册</div> 34</div>3536<script>37//注册弹出层38function openRegister(){39 layer.open({40 type: 1,41 title: false,42 area : ['360px' , '400px'],43 closeBtn: 0,44 shadeClose: true,45 skin: 'yourclass',46 content: $('#registerlayer'),47 });48 }495051 $(document).ready(function(){52 $("#registerAgree").click(function(){5354var check=document.getElementById("registerAgree");5556if(check.checked!=true){57 $("#register").css("background","#ccc");58 }59else {60 $("#register").css("background","#6FAC22");61 }62 });63 });64</script>6566</body>。

JS+div+css弹出层有_遮盖效果

JS +DIV+CSS弹出层并且后面有遮盖效果（首先要应用Jquery）//获得当前页面高度function GetPageHeight(){if ($.browser.msie){return patMode == "CSS1Compat" ? document.documentElement.clientHeight :document.body.clientHeight;}else{return self.innerHeight;}}//获得当前页面宽度function GetPageWidth(){if ($.browser.msie){return patMode == "CSS1Compat" ? document.documentElement.clientWidth :document.body.clientWidth;}else{return self.innerWidth;}}//显示遮盖层function ShowCoverDiv(){//如果遮盖层已经存在，就删除它$("#coverdiv").remove();//设置BODY的样式(可选)$("body").css({ "position": "absolute" ,"margin-top":"0px","margin-left":"0px"});//创建出遮盖层$("body").append("<div id='coverdiv'></div>");//设置遮盖层的样式$("#coverdiv").css({ "display": "none", "left": "0px", "top": "0px", "position": "absolute", "z-index": "5", "background-color": "#777", "width":GetPageWidth(), "height": GetPageHeight(), "filter": "alpha(opacity=60)" });}//显示弹出层(参数为要显示的Div内部的Html内容)function ShowPopDiv(innerHtml){//调用遮盖方法ShowCoverDiv();//创建弹出DIV$("body").append("<div id='TextDiv'></div>");//接受传进来的HTML标签if (innerHtml != null){$(innerHtml).css({ "display": "block" });$(innerHtml).appendTo("#TextDiv");}//设置弹出层在弹出情况下的位置（居中）var margintop = (GetPageHeight() - document.getElementById("TextDiv").offsetHeight) / 2;var marginleft = (GetPageWidth() - document.getElementById("TextDiv").offsetWidth) / 2;$("#TextDiv").css({ "display": "none", "position": "absolute", "z-index": "9", "top": margintop, "left": marginleft });//渐渐显示出消息层$("#coverdiv").show("slow");$("#TextDiv").show("slow");$("#TextDiv").draggable(); //拖动//当页面大小改变，那么弹出层会始终居中,遮盖层的大小也随之改变window.onresize = function(){if (document.getElementById("coverdiv") != null && document.getElementById("TextDiv") != null)$("#coverdiv").css({ "width": GetPageWidth(), "height": GetPageHeight() });if (document.getElementById("TextDiv") != null){var margintop = (GetPageHeight() - document.getElementById("TextDiv").offsetHeight) / 2;var marginleft = (GetPageWidth() -document.getElementById("TextDiv").offsetWidth) / 2;$("#TextDiv").css({ "top": margintop, "left": marginleft }); }}}//隐藏遮盖层和弹出层function closeDiv(){$("#coverdiv").hide("slow");$("#TextDiv").hide("slow");}。

用JS制作9种弹出小窗口

用JS制作9种弹出小窗口使用JavaScript可以实现各种类型的弹出小窗口，以下将介绍九种常见的实现方式。

1. `alert`函数弹窗：这是JavaScript中最简单的弹窗函数，通过在脚本中调用`alert("文本内容")`可以在页面中弹出一个带有文本内容的小窗口。

2. `confirm`函数弹窗：通过调用`confirm("文本内容")`函数可以在页面中弹出一个带有文本内容和确定/取消按钮的小窗口。

用户可以选择确定或取消。

3. `prompt`函数弹窗：通过调用`prompt("文本内容","默认值")`函数可以在页面中弹出一个带有文本内容、输入框和确定/取消按钮的小窗口。

用户可以输入内容后点击确定或取消。

4. 自定义样式的弹窗：通过CSS和JavaScript可以自定义弹窗的样式。

可以通过创建一个包含弹窗内部结构的HTML元素，使用CSS设置其样式，然后通过JavaScript控制其显示和隐藏。

5. 第三方插件：也可以使用一些第三方插件或库来实现弹窗功能，例如jQuery UI中的对话框组件、SweetAlert等等。

这些插件通常提供了更多样式和功能选项，可以根据需求来选择。

6. 使用DOM模态框：使用HTML5中的`<dialog>`元素可以创建一个模态框（类似对话框），通过JavaScript可以控制其显示和隐藏。

7. 使用Bootstrap模态框：Bootstrap是一个流行的前端框架，它提供了一个用于创建模态框的组件。

通过引入Bootstrap的样式文件和相关JavaScript文件，可以使用`<div class="modal">`元素创建模态框。

8. 自定义jQuery模态框：使用jQuery可以方便地创建自定义的模态框。

可以通过HTML和CSS创建一个基本的模态框结构，然后使用jQuery控制其显示和隐藏。

一个可移动的弹出DIV示例代码(齐全,纯JS)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>一个可移动的弹出DIV示例代码(齐全,纯JS)</title><style type="text/css"></style></head><body ><div id="bigbox"> <a href="#" onclick = "show('box',event);return false;"> [打开层] </a> </div> <div id="box" style="display:none;filter:alpha(opacity=100);opacity:1;"><div class="contentup"> <a href="#" class="od" onclick = "closeed('box');return false;"> 关闭</a><div id="boxtitle">销售话术</div><ul id="boxcontent"><li><span style='font-weight: bold; color:red;'>琳琳达人~热爱甜美搭配风分享</span>/article/231.html </li><li><span style='font-weight: bold; color:green;'><span style='font-weight: bold; color:green;'>最新的欧美风搭配哦</span></span>/article/221.html</li> <li><span style='font-weight: bold; color:red;'>回头率猛升的7月小清新私房搭</span>/article/230.html</li><li><span style='font-weight: bold; color:green;'>搭配课堂之甜美学院风惹人爱</span>/article/229.html</li><li> <span style='font-weight: bold; color:red;'>菜菜剩夏吸睛清凉搭，超有范儿</span>/article/228.html</li><li><span style='font-weight: bold; color:green;'><span style='font-weight: bold; color:green;'>清新的微风轻轻的吹，露肩小洋装泄露你的美丽心</span></span>/article/220.html</li><li><span style='font-weight: bold; color:red;'>选双好鞋，兼并舒适与美丽</span>/article/227.html</li><li><span style='font-weight: bold; color:green;'><span style='font-weight: bold; color:green;'>兔兔dovika 夏日清凉显瘦穿搭</span></span>/article/224.html</li><li> <span style='font-weight: bold; color:red;'>8这个夏天要美起来~小搭配大美丽</span>/article/223.html</li><li><span style='font-weight: bold; color:green;'>优晒新人晒搭配</span>/article/222.html</li></ul></div></div><script type="text/javascript">var prox;var proy;var proxc;var proyc;var isIe=(document.all)?true:false;function setSelectState(state){var objl=document.getElementsByTagName('select');for(var i=0;i<objl.length;i++){objl[i].style.visibility=state;}}function mousePosition(ev){if(ev.pageX || ev.pageY){return {x:ev.pageX, y:ev.pageY};}return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop};}//关闭窗口function closeWindow(){if(document.getElementById('back')!=null){document.getElementById('back').parentNode.removeChild(document.getElementById('back')); }if(document.getElementById('mesWindow')!=null){document.getElementById('mesWindow').parentNode.removeChild(document.getElementById(' mesWindow'));}if(isIe){setSelectState('');}}function show(id,ev){/*--打开--*/closeWindow();var bWidth=parseInt(document.documentElement.scrollWidth);varbHeight=parseInt(document.documentElement.scrollHeight)<592?592:parseInt(document.docu mentElement.scrollHeight);if(isIe){setSelectState('hidden');}var back=document.createElement("div");back.id="back";varstyleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHe ight+"px;";styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;";back.style.cssText=styleStr;document.body.appendChild(back);clearInterval(prox);clearInterval(proy);clearInterval(proxc);clearInterval(proyc);var o = document.getElementById(id);o.style.display = "block";o.style.width = "1px";o.style.height = "1px";prox = setInterval(function(){openx(o,500)},10);}function openx(o,x){/*--打开x--*/var cx = parseInt(o.style.width);if(cx < x){o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";}else{clearInterval(prox);proy = setInterval(function(){openy(o,300)},10);}}function openy(o,y){/*--打开y--*/var cy = parseInt(o.style.height);if(cy < y){o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";}else{clearInterval(proy);}}function closeed(id){/*--关闭--*/closeWindow();clearInterval(prox);clearInterval(proy);clearInterval(proxc);clearInterval(proyc);var o = document.getElementById(id);if(o.style.display == "block"){proyc = setInterval(function(){closey(o)},10);}}function closey(o){/*--打开y--*/var cy = parseInt(o.style.height);if(cy > 0){o.style.height = (cy - Math.ceil(cy/5)) +"px";}else{clearInterval(proyc);proxc = setInterval(function(){closex(o)},10);}}function closex(o){/*--打开x--*/var cx = parseInt(o.style.width);if(cx > 0){o.style.width = (cx - Math.ceil(cx/5)) +"px";}else{clearInterval(proxc);o.style.display = "none";}}/*-------------------------鼠标事件(拖动)---------------------*/ var od = document.getElementById("box");var dx,dy,mx,my,mouseD;var odrag;var isIE = document.all ? true : false;document.onmousedown = function(e){var e = e ? e : event;if(e.button == (document.all ? 1 : 0)){mouseD = true;}}document.onmouseup = function(){mouseD = false;odrag = "";if(isIE){od.releaseCapture();od.filters.alpha.opacity = 100;}else{window.releaseEvents(od.MOUSEMOVE);od.style.opacity = 1;}}//function readyMove(e){od.onmousedown = function(e){odrag = this;var e = e ? e : event;if(e.button == (document.all ? 1 : 0)){mx = e.clientX;my = e.clientY;od.style.left = od.offsetLeft + "px";od.style.top = od.offsetTop + "px";if(isIE){od.setCapture();od.filters.alpha.opacity = 50;}else{window.captureEvents(Event.MOUSEMOVE);od.style.opacity = 0.5;}//alert(mx);//alert(my);}}document.onmousemove = function(e){var e = e ? e : event;//alert(mrx);//alert(e.button);if(mouseD==true && odrag){var mrx = e.clientX - mx;var mry = e.clientY - my;od.style.left = parseInt(od.style.left) +mrx + "px";od.style.top = parseInt(od.style.top) + mry + "px";mx = e.clientX;my = e.clientY;}}function showBackground(obj,endInt){obj.filters.alpha.opacity+=1;if(obj.filters.alpha.opacity<endInt){setTimeout(function(){showBackground(obj,endInt)},8); }}</script></body></html>。

javaScript实现鼠标在文字上悬浮时弹出悬浮层效果

javaScript实现⿏标在⽂字上悬浮时弹出悬浮层效果在⼈⼈，CSDN等⼀些⽹站，当⿏标在某个东西上悬浮时，会弹出⼀个悬浮层，⿏标移开悬浮层消失。

⽐如说CSDN的通知（应该是进⼊写新⽂章的页⾯后页⾯上⽅的那个铃铛），具体是什么实现的呢？上代码：<!doctype html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>TEST</title></head><style type="text/css">body{position: relative;}#inform{position: absolute;top: 20px;width: 350px;max-height: 250px; /* 设置最⼤⾼度，当⾼度达到此值时出现滚动条 */z-index: 10;background-color: #E0E5E5;overflow: auto; /* ⾃动添加滚动条 */box-shadow:0px 0px 10px #000; /* 外阴影 */display: none; /* 默认隐藏 */}#informTable{table-layout:fixed; /* ⽤于实现表格td⾃动换⾏的部分代码*/width: 325px;}#informTable tr td{width: 325px;height:30px;font-size: 16px;font-family: Georgia;color: #555555;word-wrap:break-word; /*⾃动换⾏*/padding: 0 0 0 0;}#informTable tr td:hover{background-color: #D9D9D9;}#inform hr{border:1;width: 325px;margin-bottom: 0px;}</style><script type="text/javascript">//显⽰悬浮层function showInform(){document.getElementById("inform").style.display='block';// document.getElementById("inform").css("display","block");}//隐藏悬浮层function hiddenInform(event){var informDiv = document.getElementById('inform');var x=event.clientX;var y=event.clientY;var divx1 = informDiv.offsetLeft;var divy1 = informDiv.offsetTop;var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;var divy2 = informDiv.offsetTop + informDiv.offsetHeight;if( x < divx1 || x > divx2 || y < divy1 || y > divy2){document.getElementById('inform').style.display='none';}}</script><body><a id="btn" onMouseOver="javascript:showInform();" onMouseOut="hiddenInform()">警告消息</a><div id="inform" onMouseOver="javascript:showInform();" onMouseOut="hiddenInform(event)"> <table id="informTable"><tr><td>编号5005车辆发车间隔异常<hr/></td></tr><tr><td>编号5005车辆发车间隔异常<hr/></td></tr><tr><td>编号5005车辆发车间隔异常<hr/></td></tr><tr><td>编号5005车辆发车间隔异常<hr/></td></tr><tr><td>编号5005车辆发车间隔异常<hr/></td></tr><tr><td>编号5005车辆发车间隔异常<hr/></td></tr><tr><td>编号5005车辆发车间隔异常<hr/></td></tr><tr><td>编号5005车辆发车间隔异常<hr/></td></tr></table></div></body></html>效果图如下：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

用jQuery实现弹出窗口弹出div层

});
//点击链接弹出窗口
$("#popup").click(function(){
$("#box").fadeIn("fast");
//获取页面文档的高度
var docheight = $(document).height();
//追加一个层，使背景变灰
$(function(){
var screenwidth,screenheight,mytop,getPosLeft,getPosTop
screenwidth = $(window).width();
screenheight = $(window).height();
$("body").append("<div id='greybackground'></div>");
$("#greybackground").css({"opacity":"0.5","height":docheight});
return false;
});
//点击关闭按钮
screenheight = $(window).height();
//获取滚动条距顶部的偏移
mytop = $(document).scrollTop();
//计算弹出层的left
getPosLeft = screenwidth/2 - 260;
//计算弹出层的top
screenwidth = $(window).width();
screenheight = $(window).height();

js打印div内容

js打印div内容JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页开发中。

在网页开发中，经常需要将页面中的内容进行打印，其中包括打印特定的div内容。

本文将介绍如何使用JavaScript来实现打印div内容的功能。

首先，我们需要在HTML页面中定义一个div元素，并给它一个唯一的id，以便在JavaScript中能够准确地定位到这个div。

例如：```html。

<div id="printContent">。

<!-这里是需要打印的内容 -->。

</div>。

```。

接下来，我们需要编写JavaScript代码来实现打印div内容的功能。

我们可以使用window.print()方法来实现页面的打印功能，但是这样会打印整个页面，包括导航栏、侧边栏等内容，不符合我们的需求。

因此，我们需要通过JavaScript来控制打印的内容，只打印特定的div。

```javascript。

function printDiv(divId) {。

var content = document.getElementById(divId).innerHTML;var printWindow = window.open('', '', 'width=600,height=600');printWindow.document.write('<html><head><title>打印</title></head><body>');printWindow.document.write(content);printWindow.document.write('</body></html>');printWindow.document.close();printWindow.print();}。

JS控制弹出悬浮窗口（一览画面）的实例代码

JS控制弹出悬浮窗⼝（⼀览画⾯）的实例代码在web项⽬开发中经常遇到在⼀览画⾯中⽤户需要查看某⼀条记录的详细信息。

如果⽤迁移画⾯的⽅式处理，速度会⽐较慢，⽽且⽤户体验不是太好。

如果采⽤点击该条记录的详细链接时弹出⼀个层显⽰在当前画⾯的话，处理速度很快，⽽且⽤户感觉也⽐较新颖。

下⾯我以某个对⽇电⼦商务⽹站为实例说明下它的实现⽅式。

1、jsp页⾯上弹出层的代码<s:iterator value="lrVo" var="lrVo" id="lrVo" status="st"><div class="logisticscenter_xq" style="display: none;" id='<s:property value="#lrVo.logisticNO"/>'><dl><dt><strong><s:text name="bel.logisticsDetails"/>：</strong></dt><dd><strong class="close_wind">X</strong></dd></dl><div class="information logistics_win"><table width="" border="0" cellspacing="0" cellpadding="0"><tr><td class="r_text"><span class="icon9">*</span><s:text name="bel.logisticsNumber"/>：</td><td></td><td colspan="3" id="logisticNo"><s:property value="#lrVo.logisticNO"/></td></tr><tr><td valign="top" class="r_text"><span class="icon9">*</span><s:text name="bel.distribution"/>：</td><td></td><td colspan="3" style="text-align:left" id="content"><s:property value="#lrVo.content" escape="false"/></td></tr></table></div></div></s:iterator>层样式代码：.logisticscenter_xq{position: absolute;width:710px;border:solid 2px #787878;background: #edfcfe;z-index: 2;}我的处理时将弹出层放置到整个⽹站页⾯的layout.jsp，⽹站中所有页⾯的布局都继承它。

Javascript弹窗代码大全(收集)

弹窗代码大全(收集)以下包括强制弹窗 24小时IP弹窗延时弹窗退弹等我们使用cookie来控制一下就可以了。

首先，将如下代码加入主页面html的<head>区：<script>function openwin(){window.open(”page.html”,”",”width=200,height=200″)}function get_cookie(name){var search = name + “=”var returnvalue = “”;if (documents.cookie.length > 0) {offset = documents.cookie.indexof(search)if (offset != -1) {offset += search.lengthend = documents.cookie.indexof(”;”, offset);if (end == -1)end = documents.cookie.length;returnvalue=”/unescape(documents.cookie.substring(offset,end))”}}return returnvalue;}function loadpopup(){if (get_cookie(’popped’)==”){openwin()documents.cookie=”popped=yes”}}</script>然后，用<body onload=”loadpopup()”>（注意不是openwin而是loadpop啊！）替换主页面中原有的<body>这一句即可。

你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。

真正的pop-only-once！写到这里弹出窗口的制作和应用技巧基本上算是完成了，俺也累坏了，一口气说了这么多，希望对正在制作网页的朋友有所帮助俺就非常欣慰了。

JS动态添加的div点击跳转到另一页面实现代码

JS动态添加的div点击跳转到另⼀页⾯实现代码 div调⽤函数跳转：var obj = document.getElementById('id');obj.onclick=function(){window.location.href="跳转的地址" rel="external nofollow" ;}源⽂件：<!DOCTYPE html><html><head><title>⾸页推荐页⾯</title><meta name="author" content="Chunna.zheng"/><meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8"/><style type="text/css">div.recommendclass {width: 100%;height: 60px;line-height: 60px;vertical-align: middle;font-size: 18px;text-align: center; /*⽂字⽔平居中对齐*/background-color: #f5f5f5;}.mall_contentChild1Class {display: inline;width: 40%;height: 100px;background-color: #f5f5f5;}.mall_contentChild2Class {display: inline;width: 60%;height: 100px;float: right;position: relative;background-color: #f5f5f5;}.mall_contentChild2BottomClass {display: table-cell;width: 90%;vertical-align: bottom;position: absolute;left: 5px;bottom: 5px;background-color: #f5f5f5;}.mall_Child2TextLeftClass {line-height: 16px;vertical-align: bottom;background-color: #f5f5f5;}.mall_Child2TextRightClass {float: right;color: #f3b041;font-size: 25px;line-height: 26px;vertical-align: bottom;background-color: #f5f5f5;}.news_title {display: block;font-size: 18px;vertical-align: center;background-color: #f5f5f5;}.news_message {display: block;font-size: 14px;vertical-align: center;background-color: #f5f5f5;}.news_time {display: block;font-size: 12px;vertical-align: bottom;position: absolute;bottom: 5px;right: 5px;background-color: #f5f5f5;}</style></head><body style="margin: 0; padding: 0 "><div id="mall_news" class="recommendclass">新闻咨讯</div><div id="news_content" style="background-color:#f5f5f5"></div><script>var Shu = 2;var df = document.createElement("div");for (var i = 0; i <= Shu; i++) {var oDiv = document.createElement("div");var divChild1 = document.createElement("div");divChild1.className = 'mall_contentChild1Class';var img = document.createElement("img");img.style.width = "130px";img.style.height = "100px";img.src = 'ic_mall_good_stuff.jpg';divChild1.appendChild(img);oDiv.appendChild(divChild1);var divChild2 = document.createElement("div");divChild2.className = 'mall_contentChild2Class';var text1 = document.createElement("span");text1.className = 'news_title';text1.innerHTML = "我是标题";divChild2.appendChild(text1);var bottomDiv = document.createElement("div");var textLeft = document.createElement("span");textLeft.className = 'news_message';textLeft.innerHTML = "我是内容";bottomDiv.appendChild(textLeft);var textRight = document.createElement("span");textRight.className = 'news_time';textRight.innerHTML = "2017.09.23";bottomDiv.appendChild(textRight);divChild2.appendChild(bottomDiv);oDiv.appendChild(divChild2);//添加点击事件oDiv.onclick = function(){window.location.href="file:///android_asset/news.html" rel="external nofollow" ;}df.appendChild(oDiv);}document.getElementById("news_content").appendChild(df);</script></body></html>总结以上所述是⼩编给⼤家介绍的JS动态添加的div点击跳转到另⼀页⾯实现代码，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

JS实现固定在右下角可展开收缩DIV层的方法

JS实现固定在右下⾓可展开收缩DIV层的⽅法本⽂实例讲述了JS实现固定在右下⾓可展开收缩DIV层的⽅法。

分享给⼤家供⼤家参考。

具体实现⽅法如下：复制代码代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS实现固定在右下⾓可展开收缩的DIV层</title><style type="text/css"></style></head><body><div id="main">仅实现核⼼部分，⾄于内容⾃⼰完善，或者继续美化⼀下，应该不错！<div id="scroll"><div id="open" onmouseover="openbox()"><a href="/" onclick="openbox()">欢迎光临</a><div id="close" class="zzsky"><marquee align="left" onmouseover="stop()" onmouseout="start()">欢迎提出宝贵建议！</marquee></div> </div><div id="close"><a href="#" onclick="closebox()">关闭</a><script type="text/javascript"></script></div></div></div></body></html>希望本⽂所述对⼤家的javascript程序设计有所帮助。

JS+CSS简单实现DIV遮罩层显示隐藏.62

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " :// /TR/xhtml1/DTD/xhtml1-transitional.dtd">2<html xmlns=" :// /1999/xhtml">3<head>4<title>DIV CSS遮罩层</title>5<script language="javascript" type="text/javascript">6function showdiv() {7 ="block";8 ="block";9 }10function hidediv() {11 ='none';12 ='none';13 }14</script>15<style type="text/css">16#bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; h eight: 100%; background-color: black; z-index:1001; -moz-opacity:; opacity:.70; filter: alpha(opacity=70);}17#show{display: none; position: absolute; top: 25%; left: 22%; width: 53%;height: 49%; padding: 8px; border: 8px solid#E8E9F7; background-color: white; z-index:1002; overflow: auto;}18</style>19</head>20<body>21<input id="btnshow" type="button" value="Show" onclick="showdiv();"/>22<div id="bg"></div>23<div id="show">测试24<input id="btnclose" type="button" value="Close" onclick="hidediv();"/>25</div>26</body>27</html>。

js实现楼层跳跃（点击楼层按钮可对应到楼层，滚动到某一楼层对应的楼层按钮高亮）

js实现楼层跳跃（点击楼层按钮可对应到楼层，滚动到某⼀楼层对应的楼层按钮⾼亮）<!DOCTYPE html><html><head><meta charset="UTF-8"><title>楼层跳跃</title><style>* {padding: 0;margin: 0;}ul,li {list-style: none;}div {width: 100%;height: 500px;line-height: 500px;font-size: 100px;color: aliceblue;text-align: center/* border: 1px solid #ccc; */}#side-nav {position: fixed;left: 10px;top: 100px;}#side-nav li {width: 60px;height: 60px;line-height: 60px;font-weight: 900;text-align: center;background-color: #fff;border-radius: 10px;box-shadow: 2px 1px 3px 0 rgb(26, 25, 25);cursor: pointer;margin-bottom: 10px;}.yellow {background-color: yellow !important;}#box1 {background-color: red;}#box2 {background-color: lightgreen;}#box3 {background-color: lightskyblue;}#box4 {background-color: lawngreen;}#box5 {background-color: lightcoral;}#box6 {background-color: lightskyblue;}#box7 {background-color: red;}#box8 {background-color: lawngreen;}#box9 {background-color: lightcoral;}#box10 {background-color: lightgreen;}</style><script type="text/javascript">window.onload = function() {/*需求：楼层跳跃*　把楼层的⾼度设置成屏幕的⾼度* 点击按钮可以跳转到对应楼层* 滚动滑轮，到达临界点的时候，按钮跟着⾼亮显⽰ */var box = document.getElementById('box');var lous = box.getElementsByTagName('div');//楼层var sideNav = document.getElementById('side-nav');var btns = sideNav.getElementsByTagName('li');//按钮 //1.把楼层的⾼度设置成屏幕的⾼度for(var i = 0; i < lous.length; i++) {lous[i].style.height = window.innerHeight + 'px';}//2.点击按钮可以跳转到对应楼层for(var i = 0; i < btns.length; i++) {//绑定索引btns[i].index = i;btns[i].onclick = function() {// console.log(this.index);//排他for(var j = 0; j < btns.length; j++) {btns[j].className = '';}this.className = 'yellow';var ih = lous[this.index].offsetTop;window.scrollTo(0,ih);}}//3.滚动滑轮，到达临界点的时候，按钮跟着⾼亮显⽰ window.onscroll = function() {var scrollTop = window.scrollY;//滚动距离for(var i = 0; i < lous.length; i++) {if(scrollTop >= lous[i].offsetTop) { console.log(i);//排他设置⾼亮for(var j = 0; j < btns.length; j++) { btns[j].className = '';}btns[i].className = 'yellow';}}}}</script></head><body><div id="box"><div id="box1">A</div><div id="box2">B</div><div id="box3">C</div><div id="box4">D</div><div id="box5">E</div><div id="box6">F</div><div id="box7">G</div><div id="box8">H</div><div id="box9">I</div><div id="box10">J</div></div><nav><ul id="side-nav"><li class="yellow">F1</li><li>F2</li><li>F3</li><li>F4</li><li>F5</li><li>F6</li><li>F7</li><li>F8</li><li>F9</li><li>F10</li></ul></nav></body></html>。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

直接复制下面的内容，保存为html格式即可：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>MyHtml.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style>/*** 弹出层css*/.pop {width: 80%;border: 1px #96D1DF solid;background: #fff;padding: 1px;color: #333;position: absolute;top: 15%;left: 15%;height: auto;z-index: 10}/*** 弹出层css*/.pop_ {width: 80%;border: 1px #96D1DF solid;background: #fff;padding: 1px;color: #333;position: absolute;top: 15%;left: 15%;height: auto;z-index: 10}.pop_title {float: left;width: 100%;height: 30px;line-height: 30px;/* background: #ecf9ff url ('../images/title_move.gif') center no-repeat; */ background: #ecf9ff;border-bottom: 1px #d3ecf3 solid;color: #444;font-weight: bold}.pop_title_left {float: left;width: 90%;overflow: hidden;text-indent: 6px;cursor: move}.pop_title_left img {float: left;border: 0;margin: 10px 0 0 5px}.pop_title_right {width: 5%;float: right;text-align: right;cursor: pointer}.pop_title_right_print {width: 3%;float: left;text-align: right}.pop_title_right img {margin: 5px 10px 5px 10px;cursor: pointer}.pop_title_right_print img {margin: 5px 10px 5px 10px;cursor: pointer}.pop_content {float: left;width: 100%;margin: 1px 0 0 0;font-size: 14px}.pop_function {float: left;width: 100%;height: 30px;line-height: 30px;border-top: 1px #fff solid;text-align: center}.pop_search {width: 100%;height: 35px;border-top: 1px #fff solid;text-align: center;font-size: 12px;font-weight: bold;margin: 5px 0 5px 0;border-bottom: 3px #96D1DF dotted;}.pop_page {width: 100%;height: 25px;text-align: center;font-size: 12px;border-top: 3px #96D1DF dotted;vertical-align: middle;}</style><script>function get xy(e) {var a = new Array();var t = e.offsetTop;var l = e.offsetLeft;var w = e.offsetWidth;var h = e.offsetHeight;while (e = e.offsetParent) {t += e.offsetTop;l += e.offsetLeft;}a[0] = t;a[1] = l;a[2] = w;a[3] = h;return a;}//----------------------------------var DragForAll = {};function _enableDragForAll(e, toMoveObj, obj2, obj3) {if (DragForAll.o) {return false;}var clickObj = document.getElementById(toMoveObj);if (!clickObj) {return;}DragForAll.o = clickObj;if (document.getElementById(obj2)) {DragForAll.p = document.getElementById(obj2);}DragForAll.xy = getxy(DragForAll.o);e = e || event;if (!clickObj.style.left) {DragForAll.xx = new Array((e.x - DragForAll.xy[1]), (e.y - DragForAll.xy[0]));} else {DragForAll.xgap = parseInt(clickObj.style.left.substring(0, clickObj.style.left.indexOf("px")));DragForAll.ygap = parseInt(clickObj.style.top.substring(0, clickObj.style.top.indexOf("px")));DragForAll.xx = new Array((e.x - DragForAll.xgap), (e.y - DragForAll.ygap));DragForAll.xgap -= DragForAll.xy[1];DragForAll.ygap -= DragForAll.xy[0];}DragForAll.fitToCont = obj3;if (obj3) {DragForAll.fitArea = getxy(DragForAll.fitToCont);}return false;}function _DragObjForAll(e) {if (!DragForAll.o) {return;}e = e || event;var old_left = e.x - DragForAll.xx[0];var old_top = e.y - DragForAll.xx[1];if (DragForAll.fitToCont) {if ((old_left - DragForAll.xgap) - DragForAll.fitArea[1] <= 0 || old_top - DragForAll.ygap - DragForAll.fitArea[0] <= 0) {return;}if (old_left - DragForAll.xgap + DragForAll.xy[2] >= DragForAll.fitArea[1] + DragForAll.fitArea[2] || old_top - DragForAll.ygap + DragForAll.xy[3] >= DragForAll.fitArea[0] + DragForAll.fitArea[3]) {return;}}DragForAll.o.style.left = old_left + "px";DragForAll.o.style.top = old_top + "px";if (DragForAll.p) {DragForAll.p.style.left = (old_left + 5) + "px";DragForAll.p.style.top = (old_top + 5) + "px";}}function _releaseDragObjForAll(e) {DragForAll = {};}document.onmousemove = function (e) {_DragObjForAll(e);};document.onmouseup=function(e){_releaseDragObjForAll(e);e=e||event;}</script></head><body><input type="button" value="弹出DIV窗口"onclick="xingZQYTree.style.display='';xingZQYTree.style.top=event.clientY;xingZQYTree.style.left=event. clientX" /><div id="xingZQYTree" class="pop"style="display: none; width: 400px; overflow: auto; position: absolute; background-color: #FFFFFF; border: 1px solid #0099CC; padding-left: 0px"><div id="pop_title" class="pop_title"onmousedown="_enableDragForAll(event,'xingZQYTree');" title='按住鼠标可随意拖动此窗口'><div class="pop_title_left" style="font-size: 14px">  选择行政区域</div><div class="pop_title_right"><label title="关闭此窗口" onclick="xingZQYTree.style.display='none';"> X </label></div></div><div class="pop_content">5555555<br>5555555<br>5555555<br>5555555<br>5555555<br></div></div></body></html>。