carlos-sanchez
11/13/2013 - 3:08 AM

Poco soporte de momento 1. By default, a dialog is centered vertically in the viewport when opened. It is still absolutely positioned so i

Poco soporte de momento

1.  By default, a dialog is centered vertically in the viewport when opened. It is still absolutely positioned so it can be scrolled away. The viewport centering occurs regardless of the dialog’s position in the DOM tree.
2.  Dialogs can be modal. When a modal dialog is opened, it blocks the rest of the document. There is a “pending dialog” stack to handle the case of multiple modal dialogs.
3.  A new stacking layer on top of the existing CSS stacking contexts handles “always on top” behavior. Dialog and the Fullscreen spec both use the top layer. Modal dialogs reside in the top layer. So you don’t need to worry about setting a z-index manually to keep your modal on top of other elements on the page.

The dialog element also comes with a pseudo element called ::backdrop, which allows you to style the background behind a modal, thus creating the dimming overlay effect that we created in the previous five techniques, only this time, you can create that overlay easily by styl

dialog.html
content_copyfile_download
<dialog class="modal">This is the dialog!</dialog>
dialog.css
content_copyfile_download
.modal{
  /* arbitrary styling */
  background-color: white;
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
  height:200px;
  width:300px;
 
  /* change position to fixed if you want to prevent the dialog from scrolling away, and center it */
  position:fixed;
  top:50%;
  left:50%;
  margin-left: -150px;
  margin-top:-100px;
}

.modal::backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
}