Skip to content

Instantly share code, notes, and snippets.

@taniarascia
Last active February 13, 2024 07:53
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save taniarascia/a2f02555f3214c715802 to your computer and use it in GitHub Desktop.
Save taniarascia/a2f02555f3214c715802 to your computer and use it in GitHub Desktop.
Create modal popup
$(function(){
$("#modal-launcher, #modal-background, #modal-close").click(function () {
$("#modal-content,#modal-background").toggleClass("active");
});
});
#modal-background {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: .50;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);
z-index: 1000;
}
#modal-content {
background-color: white;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0 0 20px 0 #222;
-webkit-box-shadow: 0 0 20px 0 #222;
-moz-box-shadow: 0 0 20px 0 #222;
display: none;
height: 240px;
left: 50%;
margin: -120px 0 0 -160px;
padding: 10px;
position: absolute;
top: 50%;
width: 320px;
z-index: 1000;
}
#modal-background.active, #modal-content.active {
display: block;
}
<button id="modal-launcher">Launch Modal Window</button>
<div id="modal-background"></div>
<div id="modal-content">
<button id="modal-close">Close Modal Window</button>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment