js弹出的对话窗口永远保持居中显示

代码如下:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.Div_Scroll {
position:fixed;
margin:-10px;
visibility:hidden;
background-color:#808080;
opacity:0.6;
z-index:99;
}
.Div_Scroll_Content {
position:relative;
margin-top:20%;
width:inherit;
height:inherit;
}
.Div_AlertWindow {
margin:auto;
width:200px;
height:100px;
background-color:lightblue;
border:5px solid #f00;
}
</style>
<script type="text/javascript">
window.onload = function () {
var alertWindow = $("alertParent");
alertWindow.style.width = window.screen.availWidth + "px";
alertWindow.style.height = window.screen.height + "px";
$("Sure").onclick = function () {
alertWindow.style.visibility = "hidden";
}
}
function ShowAlert() {
var alertWindow = $("alertParent");
alertWindow.style.visibility = "visible";
}
$ = function (id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<div id="alertParent" class="Div_Scroll">
<div class="Div_Scroll_Content">
<div id="AlertWindow" class="Div_AlertWindow">
<input type="button" id="Sure" value="close alert Dialog..." />
</div>
</div>
</div>
<div style="height:1300px; padding-top:200px;" >
<input id="alertButton" type="button" onclick="ShowAlert();" value="Show alert Dialog..."/>
</div>
</body>
</html>

添加遮罩层

赞 (0)

相关推荐

  • JS打开新窗口的2种方式

    1.超链接<a href="http://www.jb51.net" title="我们">Welcome</a> 等效于js代码 window.location.href="http://www.jb51.net";     //在同当前窗口中打开窗口 2.超链接<a href="http://www.jb51.net" title="我们" target="_bl

  • JS定时关闭窗口的实例

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <style type ="text/css" >    .main{ background-color:Silver; width :200px; height :100px; margin-

  • JS子父窗口互相操作取值赋值的方法介绍

    $("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementByIdx_x("父窗口元素ID"): 取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document); 类似的,取其它窗口的方法大同小异$(se

  • js弹出窗口之弹出层的小例子

    [html] 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">  <HTML xmlns="http://www.w3.org/1999/xhtml">  <HEAD>  <TITLE&g

  • JavaScript操纵窗口的方法小结

    在前面的介绍中,我们讨论过close()方法: 复制代码 代码如下: win = window.open("http://www.jb51.net/", "js"): win.close(): JavaScript提供了许多方法与属性,我们可以使用它们来控制窗口. 移动.滚动.改变大小 下面的方法(N4+,IE4+)负责个定窗口的移动.滚动以及大小改变操作: 复制代码 代码如下: // 移动窗口的屏幕位置到指定的偏移x .y(绝对移动) window.moveTo(

  • js弹出的对话窗口永远保持居中显示

    复制代码 代码如下: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .Div_Scroll { positi

  • 使用js实现关闭js弹出层的窗口

    <script type="text/javascript">function toggle() {  theObj = document.getElementById('Sunyanzi').style;  if (  theObj.display == "none" ) theObj.display = "block"; else theObj.display = "none";}</script>

  • 九种js弹出对话框的方法总结

    [1.最基本的js弹出对话框窗口代码] 这是最基本的js弹出对话框,其实代码就几句非常简单: 复制代码 代码如下: <script LANGUAGE="javascript"> <!-- window.open ("page.html") --> </script> 因为这是一段javascripts代码,所以它们应该放在<script LANGUAGE="javascript">标签和</s

  • JS弹出窗口插件zDialog简单用法示例

    本文实例讲述了JS弹出窗口插件zDialog简单用法.分享给大家供大家参考,具体如下: 因为没有元素可以显示到Frameset上面去,所以重新定义了,一个index.htm,对其的操作是: Index.htm <script language="javascript" src="JS/zDialog/zDialog.js" type="text/javascript"></script> <script langua

  • JS弹出窗口代码大全(详细整理)

    如何利用网页弹出各种形式的窗口,我想大家大多都是知道些的,但那种多种多样的弹出式窗口是怎么搞出来的,我们今天就来学习一下: 1.弹启一个全屏窗口 复制代码 代码如下: <html> <body http://www.jb51.net','我们','fullscreen');">; <b>www.jb51.net</b> </body> </html> 2.弹启一个被F11化后的窗口 复制代码 代码如下: <html&g

  • 超详细的JS弹出窗口代码大全

    如何利用网页弹出各种形式的窗口,我想大家大多都是知道些的,但那种多种多样的弹出式窗口是怎么搞出来的,我们今天就来学习一下: 1.弹启一个全屏窗口 代码如下: <html> <body http://www.jb51.net','我们','fullscreen');">; <b>www.jb51.net</b> </body> </html> 2.弹启一个被F11化后的窗口 代码如下: <html> <bod

  • js弹出窗口返回值的简单实例

    a.html: <form name="form1" method="post" action=""> <a href="javascript:void(null)" class="add" onClick="open('b.html','','resizable=1,scrollbars=1,status=no,toolbar=no,menu=no,width=500,heig

  • JS弹出窗口的运用与技巧大全

    本文详细介绍了JS弹出窗口的运用,非常具有实用价值,具体一起来看一下把. //关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close();</script>"); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 this.Response.Write("<script>"); this.Response.Write(&qu

  • js弹出窗口简单实现代码

    本文实例为大家分享了js弹出窗口展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ /*margin: 0;*/ } #div1{ width: 100px; height: 100px; border: 1p

  • JavaScript简单实现弹出拖拽窗口（一）

    JavaScript简单实现弹出拖拽窗口（一）

    本文实例为大家分享JavaScript弹出拖拽窗口的具体实现代码,供大家参考,具体内容如下 需求说明:  1.点击页面按钮,弹出窗口:  2.要有半透明背景遮罩:  3.弹出窗口圆角,窗口半透明,但内容不透明:带阴影:  4.窗口可拖动:  5.拖动停止之后,滚动页面时窗口位置不动:  6.可以使用jQuery:  7.有关闭按钮:  进一步功能具体描述:  点按钮,会有一个可以拖拽的浮层出来.  有一个背景遮罩,支持标题栏的拖拽,在标题栏以外,在标题栏区域之外的区域拖拽是没有效果的,拖拽功能限

随机推荐