This is the 17th day of my participation in the More text Challenge. For more details, see more text Challenge

preface

Today to talk about the JS three basic bullet box, the cause is to see the nugget in the release of the boiling point bullet box click close when such an effect:

I didn’t get it at first, because it seemed to match the style of the site. But when I saw that it said juejin. Cn was displayed, I thought, is it a prompt from the browser? After all, yesterday just wrote a blog “native JS to achieve jump or refresh the page, the browser prompted the current page is not saved”, more impressive, but the title of the prompt is not “system XXX”, but directly to the current website url, and there are sure to cancel the button below, can trigger custom events.

I didn’t realize at this point that this was actually a native JS based pop-up. I went to review the page and tracked the click event of the close button. The compressed code was so obscure that I couldn’t figure out why.

I finally found something wrong when REVIEWING the elements with the development debugging tool:

A normal development debugging tool would look like this:

I finally saw light, this is not the original JS three basic frame effect? In popup related, only the native JS three basic popups have this blocking effect. That is, after the popup is displayed, the DOM rendering, JS script, etc., will be suspended until the popup has the corresponding button click response. The following code:

    <script>
        alert('alert play box')
        confirm('confirm play box')
        prompt('prompt play box')
    </script>
    <div>
        <p>The content of the page</p>
        <p>The content of the page</p>
        <p>The content of the page</p>
        <p>The content of the page</p>
        <p>The content of the page</p>
        <p>The content of the page</p>
        <p>The content of the page</p>
    </div>
Copy the code

The execution results are as follows:

So, if you open this popup on the nugget page and do nothing, the nugget request will be blocked and after a while the page will go blank, like this:

Well, with that said, let’s explore these three basic pop-ups together

alert(message)

Displays a warning box with a specified message and a OK button.

Message: (not required; the prompt message area is blank if not filled) Plain text to be displayed in the dialog box (plain text only, “\n” can be added to newlines).

Such as:

    alert('I'm an ice cube.')
Copy the code

confirm(message)

Displays a dialog box with the specified message and ok and cancel buttons.

Message: (not required; the prompt message area is blank if not filled) Plain text to be displayed in the dialog box (plain text only, “\n” can be added to newlines).

Returns true if the “OK” button is clicked, and false if the “Cancel” button is clicked.

Such as:

    confirm('I'm an ice cube.')? alert('I hit OK') : alert('Hit cancel')
Copy the code

prompt(text, defaultText)

Displays a dialog box that prompts the user for input.

Text: (not required) Plain text to be displayed in the dialog box (plain text only, “\n” can be added to newlines).

DefaultText: (not required) The default input text.

Click the “OK” button to return the text in the current input box, and click the “Cancel” button to return null.

Such as:

    let result = prompt('I am the ice cube \n Who are you?'.'Ice cube')
    result? alert('You entered is${result}`) : alert('You did not enter')
Copy the code

When clicking the OK button:

When clicking the Cancel button:

Afterword.

Today is the seventeenth day I adhere to more, today reviewed the most basic JS frame. It has to be said that with the use of various frameworks and libraries, it is easy to forget the original things, sometimes complex effects are often only the simplest way to achieve. Perhaps such a native JS frame is less basic with less, but it is the foundation to reflect the basic level of developers, great oaks from little acorns, refuels!

PS: today is the 17th day of my Denver nuggets challenge, more than half a month! Where there is a will, there is a way. Come on, everybody

The list of articles with further challenges is as follows:

  • Flex layout container elements and project elements attributes
  • 2021.06.02 how to play with CSS Gradient Background
  • How to Use SVG to create Text Effects along Arbitrary Paths
  • 2021.06.04 “Front-end code specification of 3 categories and 15 subcategories, let the team code be standardized!”
  • Git Commit Specification for team management: How many people don’t write commit records?
  • 2021.06.06 “How to Control CSS mouse Style and Expand mouse Click area | Weekend study”
  • 2021.06.07 “Pure CSS implementation: imitation gold mining account password login, the red panda wu eye action switch small Egg”
  • On Prototypes and Prototype Chains in 11 Aspects
  • A Closer Look at JavaScript scope and Scope Chains
  • What is a closure in JavaScript?
  • 2021.06.11 pure CSS Implementation: Cool Video Text Mask Effects
  • Apply a free API and use native JS to create typewriter-like vertical lines of text
  • Pure CSS implementation: Zebra stripes inside multi-line Text boxes
  • 2021.06.14 “Native JS implementation touch slide listening event”
  • 2021.06.15 “Native JS To achieve mouse wheel triggered page horizontal Scrolling”
  • 2021.06.16 “When the native JS realizes jump or refresh the page, the browser prompts that the current page is not saved”