信息提示弹出窗口

最新推荐文章于 2021-11-26 23:11:04 发布

最新推荐文章于 2021-11-26 23:11:04 发布 · 180 阅读

文章标签：

#JavaScript #XHTML #HTML #Blog #ViewUI

web前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript创建信息提示弹出窗口的方法。通过动态生成HTML结构和运用JavaScript来控制弹窗的显示与隐藏，实现了带有简单动画效果的信息提示框。此示例还展示了如何将参数传递给弹窗并进行显示。

<!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>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>信息提示 弹出窗口</title>

		<script type="text/javascript" language="javascript">
var basePath =window.location.protocol+"//"+window.location.host+window.location.pathname;
var imgPath = window.location.protocol+"//"+window.location.host;
var oPopup = window.createPopup();
var popTop=50;

function popmsg(count){	
	var winstr="<DIV id=popup style=\"WIDTH: 260px\">";
    winstr+="<DIV style=\"BORDER-RIGHT: #d9d9d9 2px solid; BORDER-TOP: #d9d9d9 2px solid; 
    FONT-SIZE: 12px; BACKGROUND: url(./img/9.jpg) repeat-x left top; 
    BORDER-LEFT: #d9d9d9 2px solid; WIDTH: 260px; LINE-HEIGHT: 24px; 
    BORDER-BOTTOM: #d9d9d9 2px solid; HEIGHT: 194px; TEXT-ALIGN: left\">";
    winstr+="<DIV style=\"BACKGROUND: url(./img/1513200969.gif) repeat-x left top; 
    WIDTH: 260px; BORDER-BOTTOM: #d9d9d9 1px solid; HEIGHT: 25px\">";
    winstr+="<DIV style=\"POSITION: absolute; HEIGHT: 25px; TEXT-ALIGN: left\">";
	
	winstr+="&nbsp; 温馨提示：";
	winstr+="</DIV>";
    winstr+="<DIV style=\"FLOAT: right; MARGIN-RIGHT: 7px; HEIGHT: 25px; TEXT-ALIGN: left\">";
	winstr+="<A onClick=\"parent.closePopup()\"  href=\"javascript:void(0)\">";
	winstr+="<IMG id=closepopup  style=\"BORDER-TOP-WIDTH: 0px; CLEAR: right; 
	PADDING-RIGHT: 0px; PADDING-LEFT: 5px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; 
	PADDING-BOTTOM: 0px; PADDING-TOP: 5px; BORDER-RIGHT-WIDTH: 0px\" src=\"./img/b_x.gif\">";
	winstr+="</A>";
	winstr+="</DIV>";
    winstr+="</DIV>";
	
    winstr+="<DIV style=\"PADDING-RIGHT: 0px; PADDING-LEFT: 0px; 
    BACKGROUND: url(./img/19.jpg)  repeat-x 0px 100%; PADDING-BOTTOM: 5px; 
    MARGIN: 0px 0px 5px 2px; WIDTH: 260px; PADDING-TOP: 0px; POSITION: absolute; 
    TEXT-ALIGN: left\">";
	
    winstr+="<DIV style=\"PADDING-RIGHT: 7px; PADDING-LEFT: 7px; PADDING-BOTTOM: 7px; 
    PADDING-TOP: 7px; POSITION: absolute; TEXT-ALIGN: center\" >";
	winstr+="<IMG alt=提示图标 src=\"./img/gezi.jpg\">";
	winstr+="<BR> ";
	winstr+="</DIV>";
	  
    winstr+="<DIV style=\"FLOAT: right; MARGIN: 2px; WIDTH: 158px; TEXT-ALIGN: left\">";
    winstr+="<P><FONT  color=red  size=\"+1\">看看效果：</FONT></P>";
    winstr+="<LI style=\" OVERFLOW: hidden; COLOR: #444444; LINE-HEIGHT: 20px; 
    PADDING-TOP: 0px; LIST-STYLE-TYPE: none; HEIGHT: 22px; TEXT-DECORATION: none\">
    传递的参数：<FONT  color=red>"+count+ "</FONT></LI>";
    winstr+="<LI style=\"PADDING-LEFT: 0px;  PADDING-BOTTOM: 0px; OVERFLOW: hidden; 
    COLOR: #444444; LINE-HEIGHT: 20px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; 
    HEIGHT: 25px; TEXT-DECORATION: none\">
    <A onClick=\"parent.look('http://weishaoxiang.iteye.com/blog/930114')\" 
    href=\"javascript:void(0)\"><FONT  color=red >加入的链接</FONT></A></LI>";
    winstr+="</DIV>";
	  
    winstr+="</DIV>";	
    
    winstr+="<DIV style=\"WIDTH: 200px; POSITION: relative; TEXT-ALIGN: right\">";
    winstr+="<UL  style=\"PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; 
    MARGIN: 123px 0px 0px; PADDING-TOP: 0px\">";
    winstr+="<LI style=\"PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; 
    OVERFLOW: hidden; COLOR: #444444; LINE-HEIGHT: 25px; PADDING-TOP: 0px; 
    LIST-STYLE-TYPE: none; HEIGHT: 30px; TEXT-DECORATION: none\">
    <IMG alt=手形 src=\"./img/10.jpg\">&nbsp;&nbsp;&nbsp;&nbsp;
    <A onClick=\"parent.look('http://weishaoxiang.iteye.com/blog/930114')\"  
    href=\"javascript:void(0)\"><FONT  color=red  size=\"+1 \">
    点击查看&nbsp;&nbsp;</FONT></A> </LI>";
    winstr+="</UL>";
    
    winstr+="<DIV style=\"BACKGROUND: url(./img/1513200969.gif) repeat-x left top; 
    WIDTH: 260px; BORDER-BOTTOM: #d9d9d9 1px solid; HEIGHT: 25px\">";  
    winstr+="</DIV>";
    
    winstr+="</DIV>";
    winstr+="</DIV>";
    winstr+="</DIV>";
	
    oPopup.document.body.innerHTML = winstr;	
    oPopup.document.body.style.background = "#E0EEEE";
   
    popTop=50;
    popshow();
}


function popshow(){
window.status=popTop;
if(popTop>220){
clearTimeout(mytime);
//oPopup.hide();
return;
}else if(popTop<210){
    oPopup.show(screen.width-270,screen.height,260,popTop);
}
popTop+=10;
var mytime=setTimeout("popshow();",50);
}

function closePopup(){
    oPopup.hide();
}
	            		
function look( url ){
		window.open( url );		
}	          

</script>
	</head>

	<body>
		<input type="button" value=" 信息提示 弹出窗口 " onclick="popmsg('xiaoxiang')" />
	</body>
</html>