<!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=utf-8"/>
<title>消息框,弹出层</title>
<style type='text/css'>
*{margin:0px;padding:0px;}
body {background:#fff;font-size:13px;font-family:宋体,Verdana;color:#666;height:100%; width:100%}
.mesWindow{border:#666 1px solid;background:#fff;height:auto;line-height:20px;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px; height:22px; line-height:22px;}
.mesWindowContent{margin:4px;padding-left:5px;font-size:12px; height:auto;background:#fff;min-height:40px;line-height:20px;}
.mesWindowBottom{height:22px; line-height:22px;text-align:center;border-top:#eee 1px solid;}
.mesWindow .close{height:15px;width:40px;border:none;cursor:pointer;text-decoration:underline;background:#fff;text-align:right;}
img{border:0px}
.an{width:248px;padding-left:130px;margin-top: 10px;}
.anniu{float:left;width:82px;height:29px;margin-right: 40px;display:inline;}
.out{float:right;}
.div_testList{width:488px;height:302px; background-color:#fff;display:none;}
.div_testList td{background:#fff;font-size:14px; font-family:'微软雅黑', '宋体'; }
.div_testList td input{width: 200px; line-height:20px; height:20px;}
.leftTd{width:100px; text-align:right;}
</style>
</head>
<body>
<div style="width:800px; margin:20px auto; " >
<input id="Button4" type="button" value="弹出消息框" onclick="showMessage()"/>
<input id="Button1" type="button" value="弹出alert消息框" onclick="showAlert()"/>
<input id="Button2" type="button" value="弹出confirm消息框" onclick="showConfirm()"/>
<input id="Button3" type="button" value="弹出页面上的div" onclick="showDiv()"/>
<input id="Button5" type="button" value="弹出半透明层" onclick="showBackDiv()"/>
<input id="Button5" type="button" value="弹出带文本框的消息框" onclick="showPrompt()"/>
</div>
<div style="height:1000px;width:800px;margin:auto;border:1px solid #ddd; padding:50px; ">页面内容</div>
<div class="div_testList" id="div_testList" >
<h6 style=" line-height:30px; padding-top:45px; font-size:14px; font-family:'微软雅黑', '宋体'; padding-left:60px; color:#661b18;">请填写你的正确资料!</h6>
<table width="360" height="135" cellspacing="1" style="width:360px; height:auto; margin-top:8px; margin-left:50px; background-color:#ddd;">
<tr>
<td class="leftTd">姓名:</td>
<td ><input id="txtName" type="text" maxlength="50" /></td>
</tr>
<tr>
<td class="leftTd">年龄:</td>
<td ><input id="txtAge" type="text" maxlength="50" /></td>
</tr>
<tr>
<td class="leftTd">电话:</td>
<td ><input id="txtTel" type="text" maxlength="22" /></td>
</tr>
<tr>
<td class="leftTd">手机:</td>
<td ><input id="txtMobile" type="text" maxlength="11" /></td>
</tr>
<tr>
<td class="leftTd">邮箱:</td>
<td ><input id="txtEmail" type="text" maxlength="100" /></td>
</tr>
</table>
<div class="an">
<div class="anniu" ><a href="javascript:void(0)" onclick="">提交</a> </div>
<div class="anniu"><a href="javascript:void(0)" onclick="closeDiv()">关闭</a></div>
</div>
</div>
</body>
<script type="text/javascript" src="MessageBox.js" charset='utf-8'></script>
<script type="text/javascript">
function showMessage(){
var messContent="<div style='padding:5px 10px 20px 10px;text-align:left;'>消息!<p> 消息<select><option value=1 checked=checked>选择</option></select></div>";
// 弹出提示框
messageBox.showMessageBox('标题',messContent,300);
}
function showDiv()
{
messageBox.showMessageBox("",document.getElementById("div_testList"));
}
function showBackDiv(){
// 弹出半透明的div
messageBox.showBackgroundDiv()
}
function showAlert(){
Alert("这是alert 对话框");
}
function showConfirm(){
Confirm("这是Confirm 对话框","",function(){ Alert("你点击了确定");},function(){ Alert("你点击了关闭或者取消!");});
}
function showPrompt(){
Prompt("请输入你的名字:",function(m){Alert("你输入了:"+m);});
}
function closeDiv(){
messageBox.closeWindow(true);
}
var messageBox;
(function(){
messageBox = new __messageBox(1,1);//isSetSelect,isShowBack
})();
</script>
</html>
- 1
- 2
前往页