js网页弹窗

一、最简单的弹出

用到的javascript代码如下：

function show(){

var oShow = document.getElementById('show');

oShow.style.display = 'block';

var oClose = document.createElement("span");

oClose.innerHTML = "×";

oShow.appendChild(oClose);

oClose.onclick = function(){

oShow.style.display = 'none';

oShow.removeChild(this);

}

运行代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>最简单的弹出层：前端思考</title>

<style>

*{margin:0;padding:0px;}

body{padding:30px;}

#show{width:300px;height:200px;display:none;padding:1px;position:relative;border:1px solid #4c77aa;background:#f2f7fd;margin-left:70px;zoom:1;}

#show h3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}

#show span{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}

#show p{padding:5px;}

#text{font-size:12px;text-indent:2em;line-height:20px;}

</style>

function show(){

var oShow = document.getElementByIdx_x('show');

oShow.style.display = 'block';

var oClose = document.createElement_x("span");

oClose.innerHTML = "×";

oShow.appendChild(oClose);

oClose.onclick = function(){

oShow.style.display = 'none';

oShow.removeChild(this);

}

</script>

</head>

<body>

<h3>弹出层标题栏</h3>

这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。如有什么不合理的或可以改进的，大家可以给我留言，共同学习。

</p>

</div>

</body>

</html>

二、弹出层—到浏览器中央

用到的javascript代码如下：

function show(){

var iWidth = document.documentElement.clientWidth; //获取浏览器宽度

var iHeight = document.documentElement.clientHeight; //获取浏览器高度

var oShow = document.getElementById('show');

oShow.style.display = 'block';

oShow.style.left = (iWidth-302)/2+"px"; //居中横坐标

oShow.style.top = (iHeight-202)/2+"px"; //居中纵坐标

var oClose = document.createElement("span");

oClose.innerHTML = "×";

oShow.appendChild(oClose);

oClose.onclick = function(){

oShow.style.display = 'none';

oShow.removeChild(this);

}

运行代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>弹出层—到浏览器中央：前端思考</title>

<style>

*{margin:0;padding:0px;}

body{padding:30px;}

#show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1px solid #4c77aa;background:#f2f7fd;zoom:1;}

#show h3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}

#show span{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}

#show p{padding:5px;}

#text{font-size:12px;text-indent:2em;line-height:20px;}

</style>

function show(){

var iWidth = document.documentElement.clientWidth;

var iHeight = document.documentElement.clientHeight;

var oShow = document.getElementByIdx_x('show');

oShow.style.display = 'block';

oShow.style.left = (iWidth-302)/2+"px";

oShow.style.top = (iHeight-202)/2+"px";

var oClose = document.createElement_x("span");

oClose.innerHTML = "×";

oShow.appendChild(oClose);

oClose.onclick = function(){

oShow.style.display = 'none';

oShow.removeChild(this);

}

</script>

</head>

<body>

<a onclick="show(); return false" href="#">请猛击我（我会弹到中间）</a>

<h3>弹出层标题栏</h3>

</p>

</div>

</body>

</html>

三、弹出层—到浏览器中央—背景变暗

用到的javascript代码如下：

function show(){

var iWidth = document.documentElement.clientWidth;

var iHeight = document.documentElement.clientHeight;

var bgObj = document.createElement("div"); //创建背景层

bgObj.setAttribute("id","bgbox");

bgObj.style.width = iWidth+"px";

bgObj.style.height =Math.max(document.body.clientHeight, iHeight)+"px";

document.body.appendChild(bgObj); //将创建的层插入body中

var oShow = document.getElementById('show');

oShow.style.display = 'block';

oShow.style.left = (iWidth-302)/2+"px";

oShow.style.top = (iHeight-202)/2+"px";

var oClosebtn = document.createElement("span");

oClosebtn.innerHTML = "×";

oShow.appendChild(oClosebtn);

function oClose(){

oShow.style.display = 'none';

oShow.removeChild(oClosebtn);

document.body.removeChild(bgObj);

}

oClosebtn.onclick = oClose;

bgObj.onclick = oClose;

}

运行代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>弹出层—到浏览器中央—背景变暗：前端思考</title>

<style>

*{margin:0;padding:0px;}

body{padding:30px;}

#show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1px solid #4c77aa;background:#f2f7fd;z-index:11;zoom:1;}

#show h3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}

#show span{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}

#show p{padding:5px;}

#text{font-size:12px;text-indent:2em;line-height:20px;}

#bgbox{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=30);opacity:0.3;z-index:10}

</style>

function show(){

var iWidth = document.documentElement.clientWidth;

var iHeight = document.documentElement.clientHeight;

var bgObj = document.createElement("div");

bgObj.setAttribute("id","bgbox");

bgObj.style.width = iWidth+"px";

bgObj.style.height =Math.max(document.body.clientHeight, iHeight)+"px";

document.body.appendChild(bgObj);

var oShow = document.getElementById('show');

oShow.style.display = 'block';

oShow.style.left = (iWidth-302)/2+"px";

oShow.style.top = (iHeight-202)/2+"px";

function oClose(){

oShow.style.display = 'none';

document.body.removeChild(bgObj);

}

var oClosebtn = document.createElement_x("span");

oClosebtn.innerHTML = "×";

oShow.appendChild(oClosebtn);

oClosebtn.onclick = oClose;

bgObj.onclick = oClose;

}

</script>

</head>

<body>

<a onclick="show(); return false" href="#">请猛击我（我会弹到中间，同时背景变暗）</a>

<h3>弹出层标题栏</h3>

</p>

</div>

</body>

</html>

四、弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出

键盘事件的javascript代码如下：

function getEvent(){

return window.event || arguments.callee.caller.arguments[0];

// 获得事件Event对象，用于兼容IE和FireFox

}

document.onkeyup = function(){

var event = getEvent();

if (event.keyCode == 27){

oClose();

}

运行代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出：前端思考</title>

<style>

*{margin:0;padding:0px;}

body{padding:30px;}

#show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1px solid #4c77aa;background:#f2f7fd;z-index:11;zoom:1;}

#show h3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}

#show span{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}

#show p{padding:5px;}

#text{font-size:12px;text-indent:2em;line-height:20px;}

#bgbox{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=30);opacity:0.3;z-index:10}

</style>

function show(){

var iWidth = document.documentElement.clientWidth;

var iHeight = document.documentElement.clientHeight;

var bgObj = document.createElement("div");

bgObj.setAttribute("id","bgbox");

bgObj.style.width = iWidth+"px";

bgObj.style.height =Math.max(document.body.clientHeight, iHeight)+"px";

document.body.appendChild(bgObj);

var oShow = document.getElementById('show');

oShow.style.display = 'block';

oShow.style.left = (iWidth-302)/2+"px";

oShow.style.top = (iHeight-202)/2+"px";

var oClosebtn = document.createElement_x("span");

oClosebtn.innerHTML = "×";

oShow.appendChild(oClosebtn);

function oClose(){

oShow.style.display = 'none';

oShow.removeChild(oClosebtn);

document.body.removeChild(bgObj);

}

oClosebtn.onclick = oClose;

bgObj.onclick = oClose;

function getEvent() {

return window.event || arguments.callee.caller.arguments[0];

}

document.onkeyup = function(){

var event = getEvent();

if (event.keyCode == 27){

oClose();

}

</script>

</head>

<body>

<a onclick="show(); return false" href="#">请猛击我（弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出）</a>

<h3>弹出层标题栏</h3>

</p>

</div>

</body>

</html>

猜你喜欢