重写alert，重写messgae，重写confirm
1.<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Jquery的弹出窗口（Simple Modal）</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
可以写成这样<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js " type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery.simplemodal-1.4.1.js"></script>
重这个网站上下的http://jqueryui.com/download
<style type="text/css">
/**照顾IE6下的样式问题**/
body {
margin: 0;
font: 0.9em/1.4em 'Lucida Sans Unicode','Lucida Grande',Sans-Serif;
width: 100%;
color: #bbb;
height:100%;
}
#simplemodal-overlay { background-color:#000; opacity:0.5; filter:alpha(opacity=50); }
#simplemodal-container { background-color:#fff; }
/***弹出层要用的css***/
.SimpleModalFrame { display:none; margin:0; padding:0; width:240px; overflow-x:hidden; }
.SimpleModalHead { height:24px; line-height:24px; border:1px solid #286DBB; }
.SimpleModalInfoTitle { float:left; margin-left:10px; display:inline; }
.SimpleModalCloseImage { width:9px; height:9px; display:inline; background:url(image/closeImage.png) no-repeat; cursor:pointer; float:right; margin:8px 20px 0 0; }
.SimpleModalContent { border:1px solid #286DBB; border-top:none; border-bottom:none; padding:15px 10px; line-height:20px; text-align:center; }
.clearleft { clear:left; height:-1px; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="height:100px; width:200px; margin:0 auto; line-height:200px; text-align:center;">
<input id="test" type="button" onclick="test_onclick();" value="alert()_测试" />
<input id="Button1" type="button" onclick="Button1_onclick();" value="message()_测试" />
<input id="Button2" type="button" onclick="Button2_onclick(this);" value="comfire()测试" />
<asp:Button ID="btnDelete" runat="server" ClientIDMode="Static" Text="服务端_测试" OnClientClick="return Button2_onclick(this);" OnClick="btnDelete_OnClick" />
<asp:TextBox ID="tbDeleteInfo" runat="server" ClientIDMode="Static" Width="200px" Height="30px" ></asp:TextBox>
</div>
<%--/*alert弹出框*/--%>
<div id="dialogAlert" class="SimpleModalFrame">
<div class="SimpleModalHead">
<span class="SimpleModalInfoTitle">提示信息</span>
<div onclick="$.modal.close();" class="SimpleModalCloseImage"></div>
<div class="clearleft"></div>
</div>
<div class="SimpleModalContent"></div>
<div style="border:1px solid #286DBB; border-top:none; text-align:center; padding-bottom:10px;"><input type="button" value="确定" onclick="$.modal.close();" style="margin:0 auto;"/></div>
</div>
<%--/*message弹出框*/--%>
<div id="dialogMessage" class="SimpleModalFrame">
<div class="SimpleModalHead">
<span class="SimpleModalInfoTitle">提示信息</span>
<div onclick="$.modal.close();" class="SimpleModalCloseImage"></div>
<div class="clearleft"></div>
</div>
<div class="SimpleModalContent"></div>
</div>
<%--/*confirm弹出框*/--%>
<div id="dialogConfirm" class="SimpleModalFrame">
<div class="SimpleModalHead">
<span class="SimpleModalInfoTitle">提示信息</span>
<div onclick="$.modal.close();" class="SimpleModalCloseImage"></div>
<div class="clearleft"></div>
</div>
<div class="SimpleModalContent"></div>
<div style="border:1px solid #286DBB; border-top:none; text-align:center; padding-bottom:10px;">
<input type="button" id="dialogConfirm_OK" value="确定" onclick="$.modal.close(); SimpleModal_confirm_OK();" style="margin:0 auto;"/>
<input type="button" id="dialogConfirm_Cancel" value="取消" onclick="$.modal.close();" style="margin:0 auto;"/>
</div>
</div>
</div>
<script type="text/javascript">
function SimpleModal_alert(message, title) {
if (message != null) {
if (title != null)
$("div[id='dialogAlert']").find(".SimpleModalInfoTitle").html(title);
$("div[id='dialogAlert']").find(".SimpleModalContent").html(message);
//显示弹出层
$("#dialogAlert").modal();
}
}
function test_onclick() {
SimpleModal_alert("您赢了！英国空气样本检测到日本核电站放射物质！");
}
function SimpleModal_message(message, title, showtime) {
if (message != null) {
if (title != null)
$("div[id='dialogMessage']").find(".SimpleModalInfoTitle").html(title);
$("div[id='dialogMessage']").find(".SimpleModalContent").html(message);
//显示弹出层
$("#dialogMessage").modal();
//2秒后自动关闭
if (showtime == null)
showtime = 2000;
setTimeout("$.modal.close();", showtime);
}
}
function Button1_onclick() {
SimpleModal_message("您赢了！英国空气样本检测到日本核电站放射物质！", "message");
}
/**confirm---结束**/
var confirm_IsSure = false;
var confirm_ClickObject;
function SimpleModal_confirm(clickObject, message, title) {
if (confirm_IsSure) {
confirm_IsSure = false;
return true;
} else {
if (message != null) {
if (title != null)
$("div[id='dialogConfirm']").find(".SimpleModalInfoTitle").html(title);
$("div[id='dialogConfirm']").find(".SimpleModalContent").html(message);
$("#dialogConfirm").modal();
}
confirm_ClickObject = clickObject;
return false;
}
}
function SimpleModal_confirm_OK() {
confirm_IsSure = true;
$(confirm_ClickObject).click();
}
/**confirm---结束**/
function Button2_onclick(obj) {
var b = SimpleModal_confirm(obj, "俞军给淘宝产品经理的分享");
//alert("confirm的返回值：" + b);
return b;
}
</script>
</form>
</body>
</html>
难点是confirm 其思路是：
//confirm 的实现有点复杂，说一下思路吧！把 confirm 分为两步去实现：第一步，显示弹出层，这时会有个返回值是 false （因为只有在返回值是 true ，才会有真正的影响）。第二步，如果点击的是弹出层的“确定”按钮，则再次重新点击“那个引发弹出层”的按钮（通过代码实现），此时 confirm 返回的就是 true ；如果点击的是弹出层的“取消”按钮，则返回 false 。
