Javascript实现弹出窗口

<!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=gb18030">

<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 getxy(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; 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">

&nbsp;&nbsp;用户注册

</div>

<div class="pop_title_right">

<label title="关闭此窗口" onclick="xingZQYTree.style.display=‘none‘;">

&nbsp;X&nbsp;

</label>

</div>

</div>

<div class="pop_content">

5555555<br>

5555555<br>

5555555<br>

5555555<br>

5555555<br>

</div>

</div>

</body>

</html>

Javascript实现弹出窗口

时间： 2024-07-29 12:48:56

Javascript实现弹出窗口的相关文章

JavaScript:关闭弹出窗口时刷新父窗口

JavaScript:关闭弹出窗口时刷新父窗口 2010-08-13 09:25:29|  分类: 代码示例 |举报 |字号 订阅 说明: 关闭弹出窗口时刷新父窗口也可以说是关闭子窗口时自动刷新父窗口中的信息,即用户通过window对象的open()方法打开一个新窗口(子窗口),当用 户在该子窗口中进行了数据库操作(如数据添加.修改和删除等)之后,关闭子窗口时,系统会自动刷新父窗口来实时更新信息; 思路和技术: 主要应用window.open()语句打开新窗口,并在新窗口中应用opener属性,

JavaScript 之 弹出窗口总结

//关闭弹窗 <script language="javascript"> window.close(); </script> //同时关闭父窗口和子窗口 <script language="javascript"> top.opener =null; top.close(); </script> //弹出窗口刷新当前页面width=200 height=200菜单.菜单栏,工具条,地址栏,状态栏全没有 <scr

JavaScript单击弹出窗口，可关闭可拖动的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-

javascript关闭弹出窗口时刷新父窗口和居中显示弹出窗

居中显示用到了moveTO()方法: 关闭弹出窗时刷新父窗口用到了window.opener方法: 父窗口代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="弹出窗口.aspx.cs" Inherits="弹出窗口" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

html5+css3+javascript 自定义弹出窗口

效果图: 源码: 1.demo.jsp 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 <html> 3 <head> 4 <title>demo12.jsp</title> 5 <script type="text/javascript" src="js/myLayer.js&q

JavaScript 显示弹出窗口(二)

window. open ( sURL , sName , sFeatures , bReplace ) sURL:可选项,被加载页面的html sName:可选项,指定打开的窗口的名字 _media  : IE6.0  在浏览器左边的媒体面板内打开 sUrl . _blank  :   在新窗口中打开 sUrl . _parent  :   在当前框架的父框架内打开.假如当前框架无父框架,此参数值等同于 _self . _search  : IE5.0  在浏览器左边的搜索面板内打开 sUrl

JavaScript 显示弹出窗口

window . showModalDialog ( sURL,vArguments , sFeatures )参数说明: sURL--必选参数,用来指定对话框要显示的文档的URL. //要显示页面的路径vArguments--可选参数,用来向对话框传递参数.传递的参数类型不限,包括数组等.对话框通过window.dialogArguments来取得传递进来的参数. //传入的参数sFeatures--可选参数,用来描述对话框的外观等信息,可以使用一个或几个,用分号“;”隔开.//显示的对话框的

JavaScript弹出窗口并且向父窗口输出内容代码

JavaScript弹出窗口并且向父窗口输出内容代码 <script> function openWin() { myWindow=window.open('','','width=200,height=100'); myWindow.document.write("<p>This is 'myWindow'</p>"); myWindow.focus(); myWindow.opener.document.write("<p>

JavaScript弹出窗口方法

本文实例汇总了常用的JavaScript弹出窗口方法,供大家对比参考,希望能对大家有所帮助.详细方法如下: 1.无提示刷新网页: 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点"确定"才会刷新.而有的页面不会提示,不弹出提示窗口,直接就刷新了.如果页面没有form,则不会弹出提示窗口如果页面有form表单,a)<form  method="post" ...>    会弹出提示窗口b)<form  method="get&q