Skip to content

Instantly share code, notes, and snippets.

@tanakeiQ

tanakeiQ/modal-example.html

Last active January 16, 2018 18:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tanakeiQ/90dd981170314fb1256b9c55d7f6093d to your computer and use it in GitHub Desktop.
Save tanakeiQ/90dd981170314fb1256b9c55d7f6093d to your computer and use it in GitHub Desktop.
Download ZIP
Modal script in native javascript
Raw
modal-example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Modal test
</title>
</meta>
<link rel="stylesheet" href="modal.css">
</head>
<body>
<!-- 1. Set class 'modal-action'. -->
<!-- 2. Set data-id for determining the data to be displayed -->
<input class="modal-action" data-id="delete-account" type="button" value="Modal">
<!-- 3. The same as the value of input#data-id to modal#id -->
<modal class="modal" id="delete-account">
<div class="modal-layer">
</div>
<div class="modal-container">
<h1>
Hello Modal!
</h1>
</div>
</modal>
</input>
</body>
<script src="modal.js"></script>
</html>
Raw
modal.css
modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
}
/* line 845, ../scss/style.scss */
modal .modal-layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background-color: transparent;
transition: background-color .1s linear;
}
/* line 855, ../scss/style.scss */
modal .modal-container {
z-index: 20;
position: absolute;
height: 500px;
width: 750px;
background: white;
top: calc((90% - 500px) / 2);
left: calc((100% - 750px) / 2);
opacity: 0;
transition: opacity .2s linear, top .2s linear;
}
/* line 865, ../scss/style.scss */
modal .modal-container .title {
margin-top: 10px;
font-size: 30px;
color: #5d5d5d;
font-weight: bold;
text-align: center;
}
/* line 872, ../scss/style.scss */
modal .modal-container .words {
margin-top: 10px;
text-align: center;
font-size: 13px;
}
/* line 879, ../scss/style.scss */
modal.open .modal-layer {
background-color: rgba(0, 0, 0, 0.6);
}
/* line 882, ../scss/style.scss */
modal.open .modal-container {
opacity: 1;
top: calc((100% - 500px) / 2);
}
Raw
modal.js
let modalTargets = document.getElementsByClassName('modal-action');
for (var i = 0; i < modalTargets.length; i++) {
modalTargets[i].addEventListener('click', function() {
let modalId = this.dataset.id;
var modal = document.getElementById(modalId);
modal.style.display='block';
setTimeout(function() {
modal.classList.add('open');
}, 10);
}, false);
}
let modalLayers = document.getElementsByClassName('modal-layer');
for (var i = 0; i < modalLayers.length; i++) {
modalLayers[i].addEventListener('click', function() {
let modal = this.parentNode;
modal.classList.remove('open');
setTimeout(function() {
modal.style.display='none';
}, 500);
}, false);
}
Raw
modal.scss
modal {
$height: 500px;
$width: 750px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
.modal-layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background-color: rgba(0, 0, 0, 0);
transition: background-color .1s linear;
}
.modal-container {
z-index: 20;
position: absolute;
height: $height;
width: $width;
background: white;
top: calc((90% - #{$height}) / 2);
left: calc((100% - #{$width}) / 2);
opacity: 0;
transition: opacity .2s linear, top .2s linear;
.title {
margin-top: 10px;
font-size: 30px;
color: #5d5d5d;
font-weight: bold;
text-align: center;
}
.words {
margin-top: 10px;
text-align: center;
font-size: 13px;
}
}
&.open {
.modal-layer {
background-color: rgba(0, 0, 0, 0.6);
}
.modal-container {
opacity: 1;
top: calc((100% - #{$height}) / 2);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment