给大家介绍两款最简单的popup窗体实例，供大家学习用。
第一种：
<!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>
<title>popup窗体 </title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-store">
<meta http-equiv="expires" content="0">
<meta http-equiv="Content-Type" content="text/html;charset=GBK">
</head>
<body>
<script type="text/javascript">
var popup; //全局变量
function show_popup(){
popup=window.createPopup()
var pbody=popup.document.body;
pbody.style.backgroundColor="red";
pbody.style.border="solid black 1px";
pbody.innerHTML="这是一个 pop-up！在 pop-up 外面点击，即可关闭它！";
popup.show(150,150,200,50,document.body);
}
function hide_popup(){
popup.hide();
}
</script>
<button onclick="show_popup()">显示 pop-up！</button>
<button onclick="hide_popup()">隐藏 pop-up！</button>
我是popup窗体主要内容1<br/>
我是popup窗体主要内容2<br/>
我是popup窗体主要内容3<br/>
我是popup窗体主要内容4<br/>
我是popup窗体主要内容5<br/>
我是popup窗体主要内容6<br/>
我是popup窗体主要内容7<br/>
我是popup窗体主要内容8<br/>
我是popup窗体主要内容9<br/>
我是popup窗体主要内容10<br/>
我是popup窗体主要内容11<br/>
</body>
</html>
第二种：
<!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>
<title>popup窗体</title>
<script type="text/javascript">
//popup窗体开始---------
var oPopup, oPopupBody, oPopTimer
function popInit(){
if (window.document.all){
oPopup = window.createPopup()
oPopupBody = oPopup.document.body;
oPopupBody.style.background="#000"
oPopupBody.style.fontSize="12px"
oPopupBody.style.textAlign="center"
oPopupBody.style.padding="2px 2px 0px 2px"
var s = oPopup.document.createStyleSheet();
s.addRule ('a:link','color:red;')
s.addRule ('a:visted','color:red;')
s.addRule ('a:hover','color:gold;')
oPopupBody.attachEvent('onmouseout',hidePop)
oPopupBody.attachEvent('onmouseover',clrPopTimer)
}
}
function showPop(){
if (window.document.all){
var i_left = 10, i_top = 200;
var i_width = 400, i_height = 500;
var txt = '<div><a href="">popup窗口测试</a></div>';
oPopupBody.innerHTML = txt;
oPopup.show( i_left, i_top, i_width, i_height) ;
}
}
function hidePop(){
if (window.document.all){
if (oPopup.isOpen){
oPopTimer = setTimeout("oPopup.hide()",10)
}
}
}
function clrPopTimer(){
clearTimeout(oPopTimer)
}
//popup窗体结束------------
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
popInit()
showPop()
//-->
</script>
</body>
</html>
声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/438.html
