Hatena 
In this article, I am going to describe about how to create modal popup using javascript.
It is like showing popup when button clicked and hiding popup when background clicked.
I have prepared a Demo which can be touched at the lower.
①HTML：Prepare button and content for popup
Firstly, we prepare button, background and content for popup using HTML.
Here the content is an image.
<button class="popup_btn">show popup</button>
<div class="popup">
<div class="bg"></div>
<div class="main">
<img src="img/sample.png">
</div>
</div>②CSS：Apply styles to background and content
1st~7th line: fixing the popup in the foreground and hide it.
8th~12th line: expanding the background to full screen and make the color gray.
13th~19th line: centering the content.
.popup{
position:fixed;
top: 0;
left:0;
z-index: 9999;
display: none;
}
.popup .bg{
width: 100vw;
height: 100vh;
background-color: #1119;
}
.popup .main{
width: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.popup .main img{
width: 100%;
}③Javascript：showing and hiding popup
1st line: starting the loop in order to apply event to all popup button.
3rd~5th line: showing popup when the button clicked.
6th~8th line: hiding popup when the background clicked.
document.querySelectorAll('.popup_btn').forEach(function(elem){
const popup = elem.nextElementSibling
elem.onclick = function() {
popup.style.display='block'
}
popup.querySelector('.bg').onclick = function() {
popup.style.display='none'
}
})Demo
I have prepared a Demo which can be touched.
Popup will be shown when you click the button and it will be hidden when you click the background.
We can put popup buttons as many as we like like below.
The full text of source code
In the end, I put the full text of source code.
<style>
.popup{
position:fixed;
top: 0;
left:0;
z-index: 9999;
display: none;
}
.popup .bg{
width: 100vw;
height: 100vh;
background-color: #1119;
}
.popup .main{
width: 40%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.popup .main img{
width: 100%;
}
</style>
<button class="popup_btn">show popup</button>
<div class="popup">
<div class="bg"></div>
<div class="main">
<img src="img/sample.png">
</div>
</div>
<script>
document.querySelectorAll('.popup_btn').forEach(function(elem){
const popup = elem.nextElementSibling
elem.onclick = function() {
popup.style.display='block'
}
popup.querySelector('.bg').onclick = function() {
popup.style.display='none'
}
})
</script>
That is all, it was about how to create modal popup using javascript.
