DIV提示框弹出与关闭

bearbaba 2008-02-26 02:55:00

需要实现一个功能，当按钮点下去以后：
1：先弹出一个提示框A
2：执行主任务
3: 关闭提示框A
4:下载一个文件

我如何用DIV来实现，谢谢

...全文

516 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

c11_11_11 2008-02-29

打赏
举报



<html>

<head>

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

<title>无标题文档</title>

<script>

	function GetDiv(divName) { 

		return(document.getElementById(divName)); 

		}

	function DivStyle(divName) { 

		return(GetDiv(divName).style); 

		}

	function agent(divName) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(divName),0)); }

	function isset(divName) { return((typeof(divName)=='undefined' || divName.length==0)?false:true); }

	function XYwin(divName) { var z=agent('msie')?Array(document.body.clientHeight,document.body.clientWidth):Array(window.innerHeight,window.innerWidth); return(isset(divName)?z[divName]:z); }

	

	function MessageBoxTOG() { document.onclick=function(){ DivStyle('MessageBoxBG').display='none'; DivStyle('MessageBox').display='none'; document.onclick=function(){}; }; }

	function ShowMessageBox(title,content,BoxLeft,BoxTop,BoxWidth,playUrl) 

	{ 



	var strMediaplaer="<object id='WindowsMediaPlayer' width='"+BoxWidth+"px' height='64px' classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6' ";

	strMediaplaer=strMediaplaer+"codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112'" ;

	strMediaplaer=strMediaplaer+"align='baseline' border='0' standby='Loading Microsoft Windows Media Player components...' " ;

	strMediaplaer=strMediaplaer+"type='application/x-oleobject'>" ;

	strMediaplaer=strMediaplaer+"<param name='URL' value='"+playUrl+"'>";

	strMediaplaer=strMediaplaer+"<param name='autoStart' value='false'>" ;

	strMediaplaer=strMediaplaer+"<param name='invokeURLs' value='false'>" ;

	strMediaplaer=strMediaplaer+"<param name='playCount' value='1'>" ;

	strMediaplaer=strMediaplaer+"<param name='defaultFrame' value='datawindow'>";

	strMediaplaer=strMediaplaer+"<embed src='' align='baseline' border='0' width='"+BoxWidth+"' height='64'";

	strMediaplaer=strMediaplaer+"	type='application/x-mplayer2'" ;

	strMediaplaer=strMediaplaer+"pluginspage=''" ;

	strMediaplaer=strMediaplaer+"name='MediaPlayer1' showcontrols='0' showpositioncontrols='0'";

	strMediaplaer=strMediaplaer+"showaudiocontrols='1' showtracker='0' showdisplay='0'" ;

	strMediaplaer=strMediaplaer+"showstatusbar='0'" ;

	strMediaplaer=strMediaplaer+"autosize='0'" ;

	strMediaplaer=strMediaplaer+"showgotobar='0' showcaptioning='0' autostart='0' autorewind='0'";

	strMediaplaer=strMediaplaer+"animationatstart='0' transparentatstart='0' allowscan='0'" ;

	strMediaplaer=strMediaplaer+"enablecontextmenu='0' clicktoplay='0'"  ;

	strMediaplaer=strMediaplaer+"defaultframe='datawindow' invokeurls='0'>" ;

	strMediaplaer=strMediaplaer+"</embed>" ;

	strMediaplaer=strMediaplaer+"</object>" ;

	

	content=content+strMediaplaer;

	DivStyle('MessageBoxBG').height=XYwin(0)+'px'; 

	DivStyle('MessageBoxBG').display='block'; 

	GetDiv('MessageBox').innerHTML="<div class=\"MessageBoxT\">  "+title+"<\/div>"+content+"<div class=\"MessageBoxX\" style=\"cursor:pointer;\"><a onclick='play();'>试听 | </a><a>下载 | </a><a onclick='stop();MessageBoxTOG();'  >关闭 | </a>"+"<\/div>"; 

	DivStyle('MessageBox').left=BoxLeft+'px'; 

	DivStyle('MessageBox').top=BoxTop+'px';

	DivStyle('MessageBox').width=BoxWidth+'px'; 

	DivStyle('MessageBox').display='block'; }

	

	window.onload=function(){

	document.body.innerHTML="<div id=\"MessageBoxBG\"></div><div id=\"MessageBox\"></div>"+document.body.innerHTML;

	}

	function  play()  

{  

  if(WindowsMediaPlayer.controls.isavailable('play'))  

		{  

  		WindowsMediaPlayer.controls.play();  

       //var state=setInterval("updatetime()",1000);  

                      

     }  

}  

 function  stop()  

{  

    if  (WindowsMediaPlayer.controls.isavailable('stop'))  

      {  

       WindowsMediaPlayer.controls.stop();  

       clearInterval(state);  

                      

      }  

}  



</script> 



<style type="text/css">

<!--

body {margin: 0px;}

#MessageBoxBG { display: none; position: absolute; background: #000; opacity: 0.4; -moz-opacity: 0.4; -khtml-opacity: 0.4; filter: alpha(opacity=60); width: 100%; height: 100%; }

#MessageBox { display: none; position: absolute; background: #b9e77b; color: #333; text-align: center; border: 1px solid #636D61; top: 70px; z-index: 100; }

.MessageBoxX { font-size: 12px; color: #ddd; padding: 4px 0; border-top: 1px solid #636D61; background: #778574;text-align : right; }

.MessageBoxT { font-size: 14px; text-align:left; font-weight:bold; color: #fff; padding: 4px 0; border-down: 1px solid #636D61; background:#434A42; }

.MessageBoxX ul {list-style:none;margin:0px;}

.MessageBoxX ul li {float:right;margin:0 10px}

-->

</style>

</head>

<body>

	<table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#0066FF">

  <tr>

    <td bgcolor="#FFFFFF"><a href="#" onclick="ShowMessageBox('体验','',event.clientX,event.clientY,'300','http://localhost/play/1.mp3'); return false;">批着羊皮的狼</a>

</td>

    <td bgcolor="#FFFFFF"><a href="#" onclick="ShowMessageBox('标题','<a href=\'http://www.sina.com\'>批着羊皮的狼</a>',event.clientX,event.clientY,'300','http://localhost/play/1.mp3'); return false;">批着羊皮的狼</a>

</td>

    <td bgcolor="#FFFFFF"><a href="#" onclick="ShowMessageBox('标题','<a href=\'http://www.sina.com\'>批着羊皮的狼</a>',event.clientX,event.clientY,'300',''); return false;">批着羊皮的狼34</a>

</td>

  </tr>

  <tr>

    <td bgcolor="#FFFFFF"><a href="#" onclick="ShowMessageBox('标题','<a href=\'http://www.sina.com\'>批着羊皮的狼</a>',event.clientX,event.clientY,'300',''); return false;">批着羊皮的狼</a>

 </td>

    <td bgcolor="#FFFFFF"><a href="#" onclick="ShowMessageBox('标题','<a href=\'http://www.sina.com\'>批着羊皮的狼</a>',event.clientX,event.clientY,'300',''); return false;">批着羊皮的狼</a>

</td>

    <td bgcolor="#FFFFFF"><a href="#" onclick="ShowMessageBox('标题','<a href=\'http://www.sina.com\'>批着羊皮的狼</a>',event.clientX,event.clientY,'300',''); return false;">批着羊皮的狼</a>

</td>

  </tr>

 

</table>



</body>

</html>