Created
March 31, 2021 17:08
-
-
Save frensuren/6e7395a5f0e5200045dd8629276d746d to your computer and use it in GitHub Desktop.
// source https://jsbin.com
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>Simple Modal Js</title> | |
<style id="jsbin-css"> | |
.modal { | |
position: absolute; | |
width: 50%; | |
border: 1px solid #ccc; | |
padding: 10px; | |
border-radius: 5px; | |
display: none; | |
z-index: 1; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
} | |
.modal.active { | |
display: block; | |
} | |
.close { | |
margin-top: 10px; | |
} | |
</style> | |
</head> | |
<body> | |
<button id="modal-btn">Show Modal</button> | |
<div class="modal"> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique odit nam laboriosam assumenda quasi? Libero ab, voluptatibus aliquam delectus id atque ipsam? Voluptatem sit ad nihil, blanditiis in hic nisi. | |
<br> | |
<button class="close">Close Button</button> | |
</div> | |
<script id="jsbin-javascript"> | |
document.querySelector('#modal-btn').addEventListener('click', function(){ | |
document.querySelector('.modal').classList.add('active'); | |
}); | |
document.querySelector('.close').addEventListener('click', function(){ | |
document.querySelector('.modal').classList.remove('active'); | |
}) | |
</script> | |
<script id="jsbin-source-css" type="text/css">.modal { | |
position: absolute; | |
width: 50%; | |
border: 1px solid #ccc; | |
padding: 10px; | |
border-radius: 5px; | |
display: none; | |
z-index: 1; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
} | |
.modal.active { | |
display: block; | |
} | |
.close { | |
margin-top: 10px; | |
}</script> | |
<script id="jsbin-source-javascript" type="text/javascript">document.querySelector('#modal-btn').addEventListener('click', function(){ | |
document.querySelector('.modal').classList.add('active'); | |
}); | |
document.querySelector('.close').addEventListener('click', function(){ | |
document.querySelector('.modal').classList.remove('active'); | |
})</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.modal { | |
position: absolute; | |
width: 50%; | |
border: 1px solid #ccc; | |
padding: 10px; | |
border-radius: 5px; | |
display: none; | |
z-index: 1; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
} | |
.modal.active { | |
display: block; | |
} | |
.close { | |
margin-top: 10px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
document.querySelector('#modal-btn').addEventListener('click', function(){ | |
document.querySelector('.modal').classList.add('active'); | |
}); | |
document.querySelector('.close').addEventListener('click', function(){ | |
document.querySelector('.modal').classList.remove('active'); | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment