教程集 > 脚本编程 > javascript > 正文 js实现弹出窗口之弹出层的例子

js实现弹出窗口之弹出层的例子

发布时间：2014-12-15 编辑：jiaochengji.com

介绍一个用js实现的弹出窗口之弹出层的实例代码，供大家学习参考。

代码如下：

复制代码代码示例:

<!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>弹出窗口之弹出层_www.jiaochengji.com</TITLE>

<META http-equiv=Content-Type content="text/html; charset=utf-8">

<style>

#popupcontent{

position: absolute;

visibility: hidden;

overflow: hidden;

border:1px solid #CCC;

background-color:#F9F9F9;

border:1px solid #333;

padding:5px;}

</style>

<script>

var baseText = null;

function showPopup(w,h){

var popUp = document.getElementById("popupcontent");

popUp.style.top = "200px";

popUp.style.left = "200px";

popUp.style.width = w + "px";

popUp.style.height = h + "px";

if (baseText == null) baseText = popUp.innerHTML;

popUp.innerHTML = baseText + "<div id=\"statusbar\"><input type=\"button\" value=\"Close window\" onClick=\"hidePopup();\"></div>";

var sbar = document.getElementById("statusbar");

sbar.style.marginTop = (parseInt(h)-60) + "px";

popUp.style.visibility = "visible";

}

function hidePopup(){

var popUp = document.getElementById("popupcontent");

popUp.style.visibility = "hidden";

}

</script>

<META content="MSHTML 6.00.2900.2838" name=GENERATOR></HEAD>

<BODY>

<div id="popupcontent">教程集，欢迎大家的光临。</div>

<p><a href="#" onClick="showPopup(300,200);" >onclick</a></p>

</BODY>

</HTML>

您可能感兴趣的文章：
js实现弹出窗口之弹出层的例子
 javascript弹出窗口代码大全
 javascript弹出窗口实例讲解(多个例子，多种实现方法)
javascript弹出对话框综合实例汇总
 jQuery弹出窗口完整代码(居中,居左,居右)
js弹出窗口关闭时返回已选择参数的实现代码
 JS父子窗口相互取值与赋值的方法参考
 asp.net后台弹窗怎么实现
 解析jquery获取父窗口的元素
 jQuery浮动窗口插件 jqFloatBox

关键词： 弹出窗口 　

上一篇：JS鼠标悬停特效的实例代码下一篇：js提取URL中参数作为对象的代码举例

[关闭]

js实现弹出窗口之弹出层的例子

最近更新

浏览排行