Comparing the Different Types of Native JavaScript Popups

JavaScript provides a variety of built-in pop-up APIs for displaying special UIs for user interaction. The most common ones are:

 alert("Hello, World!");

The UI varies from browser to browser, but usually you will see a small window popping up to the center of the page in a very eye-catching way, containing the messages you pass. Here are examples of Firefox and Chrome:

Major Issues in Native JavaScript Popups

JavaScript popups are blocking .

When the pop-up opens, the entire page will actually stop running. During a pop-up, you can’t interact with anything on the page – that’s exactly what the “modal window” is about, but it’s still a user experience factor that you should pay close attention to. It is crucial that no other main thread JavaScript code runs when the popup opens, which may (and most likely) unnecessarily prevent your website from doing what it needs to do.

Nine out of ten times, it is best to redesign your architecture to avoid using this behavior that forces all operations to stop. The browser implements native JavaScript alerts, too, makes it impossible for you to control its design. You can't control where they are on the page or how they look there. Unless you absolutely need their total blocking features, it's almost always best to use a custom user interface that you can design to customize the experience for the user.

Let's take a look at each native pop-up window.

window.alert()

 window.alert("Hello World");

//Show message example const button = document.querySelectorAll("button");
button.addEventListener("click", () => {
  alert("button text:" button.innerText);
});

Purpose: Displays the value of a simple message or debug variable.

How it works: This function takes a string and presents it to the user in a pop-up window of a button with the OK label. You can only change the message, not any other aspect, such as text on the button.

Alternative: Like other alerts, if you have to display a message to the user, it is best to display it in a way that suits the action you are trying to perform.

If you are trying to debug the value of a variable, consider using console.log("变量的值：", variable); and view it in the console.

window.confirm()

 window.confirm("Are you sure?");

// Ask a sample let answer = window.confirm("Do you like cats?");
if (answer) {
  // The user clicked "OK"
} else {
  // The user clicked "Cancel"
}

Purpose: Used for "Are you sure?" type messages to see if the user really wants to complete the action they have started.

How it works: You can provide custom messages, the popup will provide the OK or Cancel option, and you can then use that value to view the returned content.

Alternative: This is a very intrusive way to prompt users. As Aza Raskin said:

… Maybe you don’t want to use warnings at all. ”

There are many ways to ask the user to confirm certain content. Probably a clear UI with a confirm button that connects to what you need it to do.

window.prompt()

 window.prompt("What is your name?");

let answer = window.prompt("What is your favorite color?");
// answer is what the user enters (if any)

Purpose: Prompt the user to enter. You provide a string (probably formatted as a problem) and the user will see a popup window containing the string, an input box that can be entered, and the OK and Cancel buttons.

How it works: If the user clicks "OK", you will get what they entered in the input box. If they don't type anything and click OK, you'll get an empty string. If they choose Cancel, the return value will be null.

Alternative: Like all other native JavaScript alerts, this also does not allow you to style or position the alert box. Best to use<input> Element to obtain user information. This way, you can provide more context and purposeful design.

window.onbeforeunload()

 window.addEventListener("beforeunload", () => {
  // The standard requires the cancellation of the default operation.
  event.preventDefault();
  // Chrome requires the setting of returnValue (via MDN)
  event.returnValue = '';
});

Purpose: Issue a warning before the user leaves the page. This may sound very annoying, but it is not often used annoyingly. It is used for websites where you may be working on and need to explicitly save it. If the user has not saved their work and is about to leave, you can use this method to warn them. If they have saved their work, you should delete it.

How it works: If you have attached the beforeunload event to the window (and performed other actions shown in the snippet above), when the user tries to leave the page, they will see a pop-up asking if they want to "leave" or "cancel". Leaving the site may be because the user clicked a link, but it may also be the result of clicking the browser refresh or back button. You cannot customize the message.

MDN warns that some browsers require interaction with the page to make it work:

To combat unwanted popups, some browsers do not display prompts created in the beforeunload event handler unless the page has interacted with it. Also, some browsers don't show them at all.

Alternative: Nothing can be thought of. If this is a problem with the user losing work, you have to use it. If they choose to stay, you should make it clear what they should do to make sure that leaving is safe.

Accessibility

Native JavaScript alerts used to be unpopular in the world of accessibility, but screen readers seem to be getting smarter in the way they are handled. According to Penn State’s accessibility guidelines:

The use of alert boxes was once not encouraged, but they are actually accessible in modern screen readers.

When creating your own modal window, be sure to consider accessibility, but there are some great resources (such as this post by Ire Aderinokun) that can point you in the direction.

Common alternatives

There are many alternatives to native JavaScript popups, such as writing your own popups, using modal window libraries, and using alert libraries. Remember that none of the things we introduced can completely prevent JavaScript execution and user interaction, but some can do this by greying the background and forcing the user to interact with the modal window before continuing.

You might want to see the native HTML<dialog></dialog> element. Chris recently conducted a practical study on it. It's attractive, but there are obviously some major accessibility issues. I'm not sure if it would be better or worse to build your own popups, as handling modal windows is a very important interactive element. Some UI libraries such as Bootstrap provide modal windows, but accessibility is still largely in your hands. You may want to check out projects like a11y-dialog.

Summarize

Using the built-in API of the web platform seems to be the right thing to do - instead of sending a lot of JavaScript code to copy the functionality, you use the functionality we already have built-in. However, there are serious limitations, user experience issues and performance issues that are not conducive to using native JavaScript popups. It is important to know what they are and how to use them, but you may not need them a lot in a production web site.

The above is the detailed content of Comparing the Different Types of Native JavaScript Popups. For more information, please follow other related articles on the PHP Chinese website!