Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Alert with multiple options

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.

like image 234
chris97ong Avatar asked Mar 28 '14 10:03

chris97ong


People also ask

How many buttons are there in an alert box?

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.

Why does alert pop twice?

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.

Can you customize alert JavaScript?

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.

What is the use of alert () function?

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.


2 Answers

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(); 

like image 114
radia Avatar answered Oct 13 '22 11:10

radia


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.

like image 21
Curtis Avatar answered Oct 13 '22 09:10

Curtis