Menu
Let me explain: When you call an alert() in JS, all the code that in below of the alert, will stop and when you click in Ok, the code returns work.
I make my own Custom Alert with this code:
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;
};
}
and in the other pages:
<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>
but I have a problem, in login page, after call the cAlert(), I call this:
echo "<script>javascript:history.go(-1)</script>";
to return to the last page, when I used to using the alert(), only after the user click in ok, the browser return to the last page, but using the cAlert, the browser already returns to the last page.
What I want is that the user need to click in Ok button to the code continue as an alert().
397
One of the nice things about the built-in JavaScript alert is that - unlike virtually anything else in JavaScript - it's synchronous. It's completely blocking, and no other code will execute until it's been dismissed.
JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.
One useful function that's native to JavaScript is the alert() function. This function will display text in a dialog box that pops up on the screen. Before this function can work, we must first call the showAlert() function. JavaScript functions are called in response to events.
Change cAlert.show(content) to cAlert.show(content, success).
Change cAlert.ok() to cAlert.ok(' + success + ').
Change this.ok = function () to this.ok = function (success), and finally add success(); to the end of the ok() function.
This will call success when the button in the cAlert is clicked.
Instead of calling cAlert.show("text") you now need to call cAlert.show("text", function() { javascript:history.go(-1); } ).
So your code should now be:
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();
};
}
and:
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
