现在的位置: 网页制作教程网站制作经验 >正文
网页高级教程

分享两款最简单的popup窗体实例

发表于2016/12/25 网站制作经验 0条评论 ⁄ 热度 2,240℃

给大家介绍两款最简单的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>
  • 暂无评论