showModalDialog的简单应用

    准备两个页面,一是弹窗的页面,一个是接收的页面

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>在线消息</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">

window.onload = function ()
{
var obj = window.dialogArguments;//用来接收上个页面传过来的值

document.getElementById('ti').value = obj.name;
}
function dis()
{
	window.returnValue = false;
	window.close();
}

function chk()
{
	window.returnValue = document.getElementById('name').value + document.getElementById('email').value + document.getElementById('message').value; //接收表单的值

	window.close();
}

</script>

<style type="text/css">
    #subcontainer {width:600px;height:500px;}
	#subtitle {width:599px;height:49px;border:solid 1px green;margin-bottom:10px;background:gray;}
	#ti {background:gray;border:0;}
	#subinfo {width:600px;height:440px;}
	#subcategory{width:599px;height:49px;border:solid 1px green;background:gray;}
	#subleft {width:300px;height:49px;float:left;}
	#subright {width:199px;height:49px;float:right;text-align:right;font:18px/49px '微软雅黑';}
	#subdes {width:599px;height:389px;border:solid 1px green;}
	#anniu {border:0;background:gray;width:100px;height:49px;}
	#tab {width:599px;height:380px;border-collapse:collapse;}
	.tdl {text-align:right;}
</style>
</head>
    <body>
        <div id="subcontainer">
			<div id="subtitle">Title:<input id="ti" type="text" value=""/></div>
			<div id="subinfo">
				<div id="subcategory">
					<div id="subleft"></div>
					<div id="subright"><input type="button" id="anniu" value="close(x)" onclick="dis();"/>           </div>
				</div>
				<div id="subdes">
					<table id="tab">
						<tr><td class="tdl">your name</td><td><input id="name" type="text" /></td></tr>
						<tr><td class="tdl">your mail</td><td><input id="email" type="text" /></td></tr>
						<tr><td class="tdl">message<td><textarea id="message"></textarea></td><tr>
						<tr><td colspan="2"><input style="margin-left:200px;" type="button" value="submit" onclick="chk();"/></td></tr>
					</table>
				</div>
			</div>
			
		</div>
		
    </body>
</html>



用来接收的页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>content</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
function reply()
{
    var obj = new Object();
    obj.name = 'test';//用来传递着给news.html的
    var ret = window.showModalDialog('news.html',obj,'dialogWidth:630px;dialogHeight:530px;help:no;status:no;resizable:no');//用来接收news.html传递过来的值
    if(ret == false)
    {
        alert('发送失败');        
    }
    else
    {
        alert('发送成功');
    }
}
</script>
</head>
    <body>
	<input type="button" value="弹窗" onclick="reply();"/>
    </body>
</html>


这csdn编辑器,我勒个去,垃圾的要死,本来写了那么多,一个误操作,竟然撤销不了,弄的我都没心情写下去了,只得草草收场。



























































































































   

你可能感兴趣的:(showModalDialog的简单应用)