Use HTML5 native dialog elements and easily create modal components

The HTML 5.2 draft adds a new dialog element. But it's an experimental technique.

Previously, if we wanted to build any kind of modal dialog or dialog box, we needed to have a background, a close button, bind events in the dialog box, arrange our markup in a way, find a way to pass the message out Way to talk...it's really complicated. The dialog element solves all the above problems.

The following is the html structure of a bootstrap modal box:

 <!-- Button triggers modal box--><button class=btn btn-primary btn-lg data-toggle=modal data-target=#myModal> Start demonstrating modal box</button><!-- Modal Box (Modal) --><div class=modal fade id=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true> <div class=modal-dialog> <div class=modal-content> <div class=modal-header> <button type=button class=close data-dismiss=modal aria-hidden=true> &times; </button> <h4 class =modal-title id=myModalLabel> Modal title</h4> </div> <div class=modal-body> Add some text here</div> <div class=modal-footer> <button type=button class=btn btn-default data-dismiss=modal>Close</button> <button type=button class=btn btn-primary> Submit changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div>

The following is the HTML structure of a native modal box:

 <!-- Button triggers modal box--><button type=button class=btn>Show modal box</button><!-- Modal box--><dialog open> HTML5 native modal box</ dialog>

We've seen the simplest markup of a dialog element, and you may have noticed that open is an attribute in the dialog above. Adding this attribute to an element will force the dialog to appear, otherwise it will be removed. The dialog will also be positioned absolutely on the page.

The picture above shows a basic modal box style.

Open the browser and you can see that its basic style is like this:

 dialog { display: block; position: absolute; left: 0px; right: 0px; width: -webkit-fit-content; height: -webkit-fit-content; color: black; margin: auto; border-width: initial; border-style: solid; border-color: initial; border-image: initial; padding: 1em; background: white;}

The dialog element also introduces a new pseudo-class selector::backdrop. The default ::backdrop style viewed through the browser is as follows:

 dialog::backdrop { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; background: rgba(0, 0, 0, 0.1);}

We can style the dialog element like any HTML element, and almost any CSS style will do. Through the ::backdrop pseudo-class selector, we can use it to set the style of the background.

For example:

 dialog{ margin-top:200px; width:250px; height:250px; text-align:center; line-height:250px; border-radius: 4px; border: none; box-shadow: 0 0 15px lightgray;} dialog: :backdrop { background: rgba(black, .5);}

The above style effect is as follows:

Below is a basic dialog box that doesn't display anything visually because the open attribute is not set. You need to use JavaScript API to show/hide it:

 <dialog>This is a dialog box! </dialog>

The .show() and .close() APIs of the dialog element are to display and close the dialog box respectively. By using these two APIs on the DOM element, you can display and close the dialog box.

For example:

 <!-- HTML --><dialog> <p>This is a dialog box! </p> <button id=close>Close dialog box</button></dialog><button id=show>Show dialog box</button> <!-- script --> <script> var dialog = document. querySelector(dialog); document.querySelector(#show).onclick = function(){ dialog.show(); }; document.querySelector(#close).onclick = function(){ dialog.close(); };</script>

You can pass a parameter to dialog.close(). By listening to the close event of the dialog element, the dialog.returnValue property will return the given value.

like:

 <!--HTML--><dialog> <p>This is a dialog box! </p> <p><input type=text id=return_value value= placeholder=Please enter content/></p> <button id=close>Close dialog box</button></dialog><button id=show >Show dialog box</button><!--script--><script> var dialog = document.querySelector(dialog); document.querySelector(#show).onclick = function(){ dialog.showModal(); }; document.querySelector(#close).onclick = function(){ var val = document.querySelector(#return_value).value; dialog.close(val); }; //Listen to the dialog element close event dialog.addEventListener(close, function(){ alert(this.returnValue); });</script>

Another API for displaying dialog boxes is .showModal()

If you don't want the user to interact with page element objects other than the dialog box, then use .showModal() to open the dialog box instead of using .show(). The dialog box opened with .showModal() will have a full-window translucent background layer, blocking the user from interacting with page element objects outside the dialog box. At the same time, the dialog box will be displayed in the middle of the window by default (centered top, bottom, left, and right) ); and the dialog box opened with .show() will be displayed at the top of the window by default (centered display can be achieved through css).

After closing the dialog box, close triggers an event. Additionally, the user can close the modal dialog box by entering the Escape key. This will fire the cancel event which you can cancel using event.preventDefault().

You can use form[method=dialog] to integrate a form with a <dialog> element. After the form is submitted, it closes the dialog and sets dialog.returnValue to the value of the submit button that was used.

In addition, you can use the autofocus property to automatically focus on the form controls within the dialog box when it pops up.

For example:

 <!--HTML--><dialog id =dialog> <form method =dialog> <p>Do you agree to the Terms of Use? </p> <p><textarea class =form-control disabled>Terms and requirements...</textarea></p> <button type =submit value =Yes>Yes</button> <button type =submit value = No autofocus>No</button> </form></dialog><button id=show>Show form dialog</button><!--script--><script> var dialog = document.querySelector(dialog) ; document.querySelector(#show).onclick = function(){ dialog.showModal(); }; //Listen to the close event of the dialog element dialog.addEventListener(close, function(e){ if(this.returnValue === Yes ){ alert(this.returnValue) //dosomething... }else{ alert(this.returnValue) //dosomething... }; });</script>

Among desktop browsers, only Google Chrome supports the full functionality of dialog (as of the time of this blog post). To achieve cross-browser compatibility, please use dialog-polyfill.

<iframe src=//caniuse.com/dialog/embed scrolling=no allowtransparency=true allowfullscreen=true frameborder=0></iframe>

Reference article: Dialog element demonstration

usuallyjs function library: https://github.com/JofunLiang/usuallyjs

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.