LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Native HTML Dialog Element + Javascript .showModal() Demo

This is the popup box that I want to show. You cannot interact with anything else on this page (well, this frame in CodePen) until you click "close".

close

The button above uses the Javascript .showModal() function to present a native HTML dialog element. This centers the modal window without the use of custom CSS positioning!


Support:

Can I Use Widget provided by Andi Smith. - Pen inspired by this article.

CSS
button {
  font-size: 1em;
  padding: 1.5em 5em;
  margin: 1em 0;
  background: green;
  border: 0;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background: orange;
}

/* ----- DEMO STUFF ----- */
body {
  font-family: sans-serif;
  font-size: 1.2em;
  color: #444;
  padding: 5% 10%;
  text-align: center;
  line-height: 1.4;
}

hr {
  border: 0;
  border-top: 2px solid #aaa;
  margin: 3em 0;
}

.caniuse {
  background: #eee;
  border-radius: 5px;
}
JS
$('button').on('click', function() {
		$('dialog')[0].showModal();
});
$('.close-popup').on('click', function(e) {
		e.preventDefault();
		$('dialog')[0].close();
});

Description

The button uses the javascript ".showModal()" function to pop up a native HTML dialog element. This centers the modal window without the use of custom CSS positioning! (And is style-able via CSS, unlike javascript "prompts" or "alerts".)
Term
Sat, 04/14/2018 - 20:45

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv