Just wondering, is it possible to create an alert with multiple options?
Like for example, in Facebook, when you try to close the tab/window when you have not finished typing your message, an alert with the options "Leave this page" and "Stay on this page" will pop up.
An alert box is used to inform/alert the user about an event. This type of popup box has only one button, named 'OK', and has no return value.
You can blame the default Repeat Alerts setting in iOS for this. This is set to repeat alerts once for the Messages app, meaning you'll get a second alert for the same message two minutes after the first one. To avoid this repeated alert, you need to mark the message as read.
The standard alert box in JavaScript does not provide the option to apply CSS. To style your alert box, you need to create a custom one first. The custom alert box will be created using jQuery and styles will be applied to CSS.
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.
Example with form, you'are looking for window.onbeforeunload:
<script type="text/javascript">
var originalFormContent
var checkForChanges = true;
jQuery(document).ready(function () {
originalFormContent = jQuery('#myForm input[type=text]').serialize() + jQuery('#myForm select').serialize();
});
function onClose() {
if (checkForChanges && originalFormContent != "undefined") {
var content = jQuery('#myForm input[type=text]').serialize() + jQuery('#myForm select').serialize();
if (content != originalFormContent) {
return confirm('You have unsaved changes. Click OK if you wish to continue ,click Cancel to return to your form.');
}
}
}
window.onbeforeunload = onClose();
You're referring to window.onbeforeunload
:
Best way to detect when a user leaves a web page?
You can also use the window.confirm()
function for OK
/Cancel
options:
http://jsfiddle.net/UFw4k/1
Other than that, you'd have to implement a custom modal alert, such as jQuery Dialog.
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