国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Table of Contents
JavaScript Dialog class
Initialization templates and browser support detection
Summarize
Home Web Front-end CSS Tutorial Replace JavaScript Dialogs With New HTML Dialog

Replace JavaScript Dialogs With New HTML Dialog

Mar 14, 2025 am 09:20 AM

Say goodbye to JavaScript dialog box and embrace HTML<dialog></dialog> element! This article will demonstrate how to use HTML<dialog></dialog> Elements and JavaScript classes elegantly replace traditional JavaScript dialog boxes ( alert() , confirm() , and prompt() ) and improve user experience and accessibility.

Replace JavaScript Dialogs With New HTML Dialog

Are you tired of those monotonous styles and limited functionality JavaScript dialogs? Although they are convenient, they have shortcomings in accessibility, style customization and modernization. This article will provide a more flexible and powerful alternative.

I've used API calls and JavaScript dialogs heavily in a project to collect user feedback. Waiting for another developer to complete<modal></modal> During the development of the component, I used alert() , confirm() and prompt() functions. For example:

 const deleteLocation = confirm('Delete Location?');
if (deleteLocation) {
  alert('location deleted');
}

At this time, I realized alert() , confirm() and prompt() come with many often overlooked modal window features:

  1. True modal window: always on top of the stack, even in z-index: 99999;<div> Above.<li> <strong>Keyboard access:</strong> Press Enter to confirm, press Escape to cancel.</li> <li> <strong>Screen reader friendly:</strong> Move focus and allow reading of modal window content.</li> <li> <strong>Focus Capture:</strong> Pressing the Tab key does not jump to any focusable elements on the main page (but in Firefox and Safari, the focus jumps to the browser UI. Strangely, it is impossible to use the Tab key to move the focus to the "Accept" or "Cancel" buttons in any browser).</li> <li> <strong>Support for user preferences:</strong> Light and dark modes are supported out of the box.</li> <li> <strong>Pause code execution:</strong> Wait for user input.</li> <p> These JavaScript methods meet my needs in 99% of the cases. So, why don't I (and other web developers) use them often? Probably because they look like system errors and cannot be styled. Another important consideration is that they are being gradually being deprecated. The first is to remove it from the cross-domain iframe, which is said to be completely removed from the web platform in the future, although this plan seems to be paused.</p> <p> With this in mind, what alternatives do we have to replace <code>alert() , confirm() , and prompt() ? You may have heard of HTML<dialog></dialog> Elements, this article will focus on how to use it in conjunction with JavaScript classes.

    Although it is impossible to completely copy the full functionality of the JavaScript dialog box, if we<dialog></dialog> showModal() method is used in conjunction with Promise (Promise can resolve (accept) or reject (cancel)), so we can get almost the same functionality. Going a step further, let's do it for HTML<dialog></dialog> Elements add sound effects, just like a real system dialog!

    If you want to view the demo now, visit here.

    JavaScript Dialog class

    First, we need a basic JavaScript class that contains a settings object that will be merged with the default settings. These settings will be used for all dialogs unless you overwrite them when invoked (more on that later).

     export default class Dialog {
      constructor(settings = {}) {
        this.settings = Object.assign(
          {
            /* DEFAULT SETTINGS - see description below */
          },
          settings
        );
        this.init();
      }
      // ...
    }

    Settings include:

    • accept : The label of the "Accept" button.
    • bodyClass : The dialog box is open and the browser does not support it<dialog></dialog> when added to the element's CSS class.
    • cancel : The label of the "Cancel" button.
    • dialogClass : Add to<dialog></dialog> Custom CSS class for elements.
    • message :<dialog></dialog> Internal content.
    • soundAccept : The URL of the audio file that the user plays when clicking the "Accept" button.
    • soundOpen : The URL of the audio file that the user plays when the dialog box is opened.
    • template : an optional HTML template, injected into<dialog></dialog> middle.

    Initialization templates and browser support detection

    In init method, we will add a helper function to detect the browser's HTML<dialog></dialog> Support for elements and set basic HTML:

     init() {
      // Test<dialog> Support this.dialogSupported = typeof HTMLDialogElement === 'function';
      this.dialog = document.createElement('dialog');
      this.dialog.dataset.component = this.dialogSupported ? 'dialog' : 'no-dialog';
      this.dialog.role = 'dialog';
    
      // HTML template this.dialog.innerHTML = `
        <fieldset data-ref="fieldset" role="document">
    <legend data-ref="message"></legend>
    <div data-ref="template"></div>
    </fieldset>
    <menu></menu> `;
    
      document.body.appendChild(this.dialog);
      // ...
    }</dialog>

    Browser pair<dialog></dialog> The support situation varies, so we need to perform detection and provide a fallback solution.

    (The subsequent steps are similar to the original text, and the length is too long. Some code details are omitted here, but key logic and code snippets are retained, and the language is polished and adjusted.)

    ... (Omit some code details, including DOM node references, button attributes, cancel button events, polyfills that do not support browsers, keyboard navigation, display<dialog></dialog> , waiting for user input, hiding<dialog></dialog> , focus processing, add alert , confirm and prompt methods, asynchronous/waiting, cross-browser styles, custom dialog examples, etc.) ...

    Summarize

    Through the solutions provided in this article, you can easily use more modern and flexible HTML<dialog></dialog> Elements replace traditional JavaScript dialogs to improve user experience and application accessibility. Remember to adjust the style and functionality according to your specific needs to create a custom dialog that best suits you.

The above is the detailed content of Replace JavaScript Dialogs With New HTML Dialog. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is Autoprefixer and how does it work? What is Autoprefixer and how does it work? Jul 02, 2025 am 01:15 AM

Autoprefixer is a tool that automatically adds vendor prefixes to CSS attributes based on the target browser scope. 1. It solves the problem of manually maintaining prefixes with errors; 2. Work through the PostCSS plug-in form, parse CSS, analyze attributes that need to be prefixed, and generate code according to configuration; 3. The usage steps include installing plug-ins, setting browserslist, and enabling them in the build process; 4. Notes include not manually adding prefixes, keeping configuration updates, prefixes not all attributes, and it is recommended to use them with the preprocessor.

CSS tutorial for creating a sticky header or footer CSS tutorial for creating a sticky header or footer Jul 02, 2025 am 01:04 AM

TocreatestickyheadersandfooterswithCSS,useposition:stickyforheaderswithtopvalueandz-index,ensuringparentcontainersdon’trestrictit.1.Forstickyheaders:setposition:sticky,top:0,z-index,andbackgroundcolor.2.Forstickyfooters,betteruseposition:fixedwithbot

What is the conic-gradient() function? What is the conic-gradient() function? Jul 01, 2025 am 01:16 AM

Theconic-gradient()functioninCSScreatescirculargradientsthatrotatecolorstopsaroundacentralpoint.1.Itisidealforpiecharts,progressindicators,colorwheels,anddecorativebackgrounds.2.Itworksbydefiningcolorstopsatspecificangles,optionallystartingfromadefin

What is the scope of a CSS Custom Property? What is the scope of a CSS Custom Property? Jun 25, 2025 am 12:16 AM

The scope of CSS custom properties depends on the context of their declaration, global variables are usually defined in :root, while local variables are defined within a specific selector for componentization and isolation of styles. For example, variables defined in the .card class are only available for elements that match the class and their children. Best practices include: 1. Use: root to define global variables such as topic color; 2. Define local variables inside the component to implement encapsulation; 3. Avoid repeatedly declaring the same variable; 4. Pay attention to the coverage problems that may be caused by selector specificity. Additionally, CSS variables are case sensitive and should be defined before use to avoid errors. If the variable is undefined or the reference fails, the fallback value or default value initial will be used. Debug can be done through the browser developer

CSS tutorial for creating loading spinners and animations CSS tutorial for creating loading spinners and animations Jul 07, 2025 am 12:07 AM

There are three ways to create a CSS loading rotator: 1. Use the basic rotator of borders to achieve simple animation through HTML and CSS; 2. Use a custom rotator of multiple points to achieve the jump effect through different delay times; 3. Add a rotator in the button and switch classes through JavaScript to display the loading status. Each approach emphasizes the importance of design details such as color, size, accessibility and performance optimization to enhance the user experience.

CSS tutorial focusing on mobile-first design CSS tutorial focusing on mobile-first design Jul 02, 2025 am 12:52 AM

Mobile-firstCSSdesignrequiressettingtheviewportmetatag,usingrelativeunits,stylingfromsmallscreensup,optimizingtypographyandtouchtargets.First,addtocontrolscaling.Second,use%,em,orreminsteadofpixelsforflexiblelayouts.Third,writebasestylesformobile,the

How to center an entire grid within the viewport? How to center an entire grid within the viewport? Jul 02, 2025 am 12:53 AM

To make the entire grid layout centered in the viewport, it can be achieved by the following methods: 1. Use margin:0auto to achieve horizontal centering, and the container needs to be set to set the fixed width, which is suitable for fixed layout; 2. Use Flexbox to set the justify-content and align-items properties in the outer container, and combine min-height:100vh to achieve vertical and horizontal centering, which is suitable for full-screen display scenarios; 3. Use CSSGrid's place-items property to quickly center on the parent container, which is simple and has good support from modern browsers, and at the same time, it is necessary to ensure that the parent container has sufficient height. Each method has applicable scenarios and restrictions, just choose the appropriate solution according to actual needs.

How to create an intrinsically responsive grid layout? How to create an intrinsically responsive grid layout? Jul 02, 2025 am 01:19 AM

To create an intrinsic responsive grid layout, the core method is to use CSSGrid's repeat(auto-fit,minmax()) mode; 1. Set grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) to let the browser automatically adjust the number of columns and limit the minimum and maximum widths of each column; 2. Use gap to control grid spacing; 3. The container should be set to relative units such as width:100%, and use box-sizing:border-box to avoid width calculation errors and center them with margin:auto; 4. Optionally set the row height and content alignment to improve visual consistency, such as row

See all articles