让我解释一下:当您在JS中调用alert()时,警报下方的所有代码都将停止,当您单击Ok时,代码将返回工作.
function cAlert() { var bOn; this.show = function (content) { bOn = true; document.write('<div id="turnOffLight"></div><div id="cAlertBox"><div id="cAlertImageBox"><img style="position: absolute; top: 54%; left: 50%; margin-top: -32px; margin-left: -32px;" src="Images/Vectors/1429744831_678136-shield-warning-64.png" alt=""/> </div><div id="cAlertContentBox"> </div><div id="cAlertButtonBox"><input id="cAlertButtonStyle" type="button" value="OK" onclick="cAlert.ok()" /></div></div>'); $("#cAlertContentBox").html(content); $("#cAlertBox").show(); $("#turnOffLight").fadeIn("fast"); var div = document.getElementById('cAlertBox').offsetWidth; var res = -Math.abs(div / 2); document.getElementById('cAlertBox').style.marginTop = res + "px"; }; this.ok = function () { $("#cAlertBox").hide(); $("#turnOffLight").fadeOut("medium"); bOn = false; }; }
在其他页面中:
<head> <script src="Scripts/jQuery_1.11.2.js" type="text/javascript"></script> <script src="Scripts/cAlertScript.js" type="text/javascript"></script> <script type="text/javascript">var cAlert = new cAlert();</script> </head>
但我有一个问题,在登录页面,调用cAlert()后,我称之为:
echo "<script>javascript:history.go(-1)</script>";
返回到最后一页,当我以前使用alert()时,只有在用户点击确定后,浏览器才会返回到最后一页,但是使用cAlert,浏览器已经返回到最后一页.
解决方法
将cAlert.show(内容)更改为cAlert.show(内容,成功).
将cAlert.ok()更改为cAlert.ok(‘success’).
将this.ok = function()更改为this.ok = function(成功),最后添加success();到ok()函数的末尾.
将cAlert.ok()更改为cAlert.ok(‘success’).
将this.ok = function()更改为this.ok = function(成功),最后添加success();到ok()函数的末尾.
单击cAlert中的按钮时,这将调用成功.
您现在需要调用cAlert.show(“text”,function(){javascript:history.go(-1);}),而不是调用cAlert.show(“text”).
所以你的代码现在应该是:
function cAlert() { var bOn; this.show = function (content,success) { bOn = true; document.write('<div id="turnOffLight"></div><div id="cAlertBox"><div id="cAlertImageBox"><img style="position: absolute; top: 54%; left: 50%; margin-top: -32px; margin-left: -32px;" src="Images/Vectors/1429744831_678136-shield-warning-64.png" alt=""/> </div><div id="cAlertContentBox"> </div><div id="cAlertButtonBox"><input id="cAlertButtonStyle" type="button" value="OK" onclick="cAlert.ok(' + success + ')" /></div></div>'); $("#cAlertContentBox").html(content); $("#cAlertBox").show(); $("#turnOffLight").fadeIn("fast"); var div = document.getElementById('cAlertBox').offsetWidth; var res = -Math.abs(div / 2); document.getElementById('cAlertBox').style.marginTop = res + "px"; }; this.ok = function (success) { $("#cAlertBox").hide(); $("#turnOffLight").fadeOut("medium"); bOn = false; success(); }; }
和:
<head> <script src="Scripts/jQuery_1.11.2.js" type="text/javascript"></script> <script src="Scripts/cAlertScript.js" type="text/javascript"></script> <script type="text/javascript"> var cAlert = new cAlert(); cAlert.show("text",function() { javascript:history.go(-1); } ); </script> </head>