Skip to content

Instantly share code, notes, and snippets.

@mrshawnspencer

mrshawnspencer/modal dialog box simple html css js standalone

Last active October 16, 2021 22:07
Show Gist options
  • Save mrshawnspencer/56a0aeaaf2abadb175b8b516dce7df26 to your computer and use it in GitHub Desktop.
Save mrshawnspencer/56a0aeaaf2abadb175b8b516dce7df26 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
modal dialog box simple html css js standalone
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Handy Dandy HTML5 Modal</title>
<meta name="description" content="JavaScript Interview Assignment">
<meta name="author" content="Mr. Shawn Spencer">
<!-- <link rel="stylesheet" href="css/styles.css?v=1.0"> -->
<!-- Plastic Buttons Style: https://1stwebdesigner.com/free-code-snippets-css-buttons/ -->
<style type="text/css" media="screen">
html,
body,
h1 {
font-family: 'Open Sans', 'Droid Serif', Lato, 'Helvetica Neue', sans-serif;
}
.centered {
margin: 3.125rem auto;
text-align: center;
}
.page-content {
margin: 1rem 25% 3rem;
}
.button::-moz-focus-inner {
border: 0;
padding: 0;
}
.button {
display: inline-block;
*display: inline;
zoom: 1;
padding: 6px 20px;
margin: 0;
cursor: pointer;
border: 1px solid #bbb;
overflow: visible;
font: bold 13px arial, helvetica, sans-serif;
text-decoration: none;
white-space: nowrap;
color: #555;
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
-webkit-transition: background-color .2s ease-out;
-moz-transition: background-color .2s ease-out;
-ms-transition: background-color .2s ease-out;
-o-transition: background-color .2s ease-out;
transition: background-color .2s ease-out;
background-clip: padding-box;
/* Fix bleeding */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.button:hover {
background-color: #eee;
color: #555;
}
.button:active {
background: #e9e9e9;
position: relative;
top: 1px;
text-shadow: none;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.button[disabled],
.button[disabled]:hover,
.button[disabled]:active {
border-color: #eaeaea;
background: #fafafa;
cursor: default;
position: static;
color: #999;
/* Usually, !important should be avoided but here it's really needed :) */
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
/* 50px:
height: 31.25rem;
*/
/* Could be more or less, depending on screen size */
/* width: 80%; */
height: auto;
width: 31.25rem;
background-color: #fefefe;
/* 15% from the top and centered */
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
-webkit-box-shadow: 0px 2px 4px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0px 2px 4px 3px rgba(0, 0, 0, 0.5);
}
.modal-header>* {
font-weight: 500;
}
.modal-text {
width: 90%;
margin: 1% 0 2% 0;
}
.modal-btns {
/* width: 90%; */
text-align: right;
margin: 10% 0 2% 0;
}
.divContainer {
height: 3rem;
line-height: 2;
}
.divLeft,
.divRight {
font-weight: 600;
width: 48%;
vertical-align: middle;
height: inherit;
}
.divLeft {
float: left;
}
/* Close Modal Element */
.divRight {
float: right;
text-align: right;
color: #aaa;
font-size: 2rem;
line-height: normal;
margin-top: -0.1875rem;
}
.divRight:hover,
.divRight:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
</style>
</head>
<body>
<div class="centered">
<h1>Handy Dandy Modal Dialog Example</h1>
<h4>(Simple HTML, CSS and JavaScript)</h4>
<div class="page-content">
<p>A “modal dialog box” means that the web page visitor cannot interact with the rest of the page, press
other buttons, and so forth, until they have dealt with the window. </p>
<p>In this case – until they press “OK”. It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has
a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making
it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum
as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their
infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
(injected humour and the like).</p>
</div>
<!-- Trigger/Open The Modal -->
<button id="openModal" class="button">Open Modal</button>
</div>
<!-- The Modal -->
<div id="theModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="divContainer">
<div class="divLeft">Simple Modal Dialog Box</div>
<div id="closeModal" class="divRight close">&times;</div>
</div>
<div class="clearfix"></div>
<div class="modal-text">There are many variations of passages of Lorem Ipsum available, but the majority
have suffered alteration in some form, by injected humour, or randomised words which don't look even
slightly believable.</div>
<div class="modal-btns">
<button id="cancelModal" class="button">Cancel</button>
<button id="okModal" class="button">OK</button>
</div>
</div>
</div>
<!-- <script src="js/scripts.js"></script> -->
<script type="text/javascript">
// Get the state of the modal: displayed = true
var ms = false;
// Get the modal
var modal = document.getElementById("theModal");
// Get the button that opens the modal
var btn = document.getElementById("openModal");
// Get the element that closes the modal
var closeModal = document.getElementById("closeModal");
var cancelModal = document.getElementById("cancelModal");
var okModal = document.getElementById("okModal");
// When the user clicks on the button, open the modal
btn.onclick = function () {
ms = true;
modal.style.display = "block";
}
// When the user clicks (x), close the modal
closeModal.onclick = function () {
modal.style.display = "none";
// Return focus to the web page
window.focus();
}
// When the user clicks Cancel, close the modal
cancelModal.onclick = function () {
modal.style.display = "none";
// Return focus to the web page
window.focus();
}
// When the user clicks OK, process the info and close the modal
okModal.onclick = function () {
modal.style.display = "none";
// Return focus to the web page
// window.focus();
setTimeout(function () { alert("Your choice has been noted."); }, 600);
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
// Return focus to the web page
window.focus();
}
}
// When the user clicks ESC, close it
document.onkeydown = function (evt) {
if (ms === true) {
evt = evt || window.event;
var isEscape = false;
if ("key" in evt) {
isEscape = (evt.key === "Escape" || evt.key === "Esc");
} else {
isEscape = (evt.keyCode === 27);
}
if (isEscape) {
modal.style.display = "none";
ms = false;
}
}
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment