Scribd
Upload
131 views2 pages

jQuery Simple Pop-Up Example

This document describes how to create a pop-up window using jQuery. It includes the HTML, CSS, and JavaScript code to display a pop-up with example text when a user clicks the "Open" button, and close it when they click the "Close" button or anywhere outside the pop-up. The JavaScript code uses the addClass and removeClass methods to toggle the "active" class, which controls the visibility of the pop-up overlay and content in the CSS styles.

Uploaded by

shadab0123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
131 views2 pages

jQuery Simple Pop-Up Example

This document describes how to create a pop-up window using jQuery. It includes the HTML, CSS, and JavaScript code to display a pop-up with example text when a user clicks the "Open" button, and close it when they click the "Close" button or anywhere outside the pop-up. The JavaScript code uses the addClass and removeClass methods to toggle the "active" class, which controls the visibility of the pop-up overlay and content in the CSS styles.

Uploaded by

shadab0123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

--Creates the popup body-->


<div class="popup-overlay">
<!--Creates the popup content-->
<div class="popup-content">
<h2>Pop-Up</h2>
<p> This is an example pop-up that you can make using jQuery.</p>
<!--popup's close button-->
<button class="close">Close</button> </div>
</div>
<!--Content shown when popup is not displayed-->
<h2>jQuery Pop-Up Example</h2>
<button class="open">Open</button>

JS============

//appends an "active" class to .popup and .popup-content when the "Open" button is
clicked
$(".open").on("click", function() {
$(".popup-overlay, .popup-content").addClass("active");
});

//removes the "active" class to .popup and .popup-content when the "Close" button
is clicked
$(".close, .popup-overlay").on("click", function() {
$(".popup-overlay, .popup-content").removeClass("active");
});

CSS========

html {
font-family: "Helvetica Neue", sans-serif;
width: 100%;
color: #666666;
text-align: center;
}

.popup-overlay {
/*Hides pop-up when there is no "active" class*/
visibility: hidden;
position: absolute;
background: #ffffff;
border: 3px solid #666666;
width: 50%;
height: 50%;
left: 25%;
}

.popup-overlay.active {
/*displays pop-up when "active" class is present*/
visibility: visible;
text-align: center;
}

.popup-content {
/*Hides pop-up content when there is no "active" class */
visibility: hidden;
}
.popup-content.active {
/*Shows pop-up content when "active" class is present */
visibility: visible;
}

button {
display: inline-block;
vertical-align: middle;
border-radius: 30px;
margin: .20rem;
font-size: 1rem;
color: #666666;
background: #ffffff;
border: 1px solid #666666;
}

button:hover {
border: 1px solid #666666;
background: #666666;
color: #ffffff;
}

You might also like