I've been working on creating a custom popup using HTML, CSS, and some jQuery functions. My idea was that when I click on the main div, it should expand in size and display a cancel button, which it does successfully. However, the issue arises when trying to close the popup by clicking the remove button.
Below is the HTML code:
<div class="custom-popup-div" id="popup">
<div class="custom-popup-remove-button" id="popup-button">
<span class="glyphicon glyphicon-remove"></span>
</div>
</div>
And here are the scripts I'm using:
$(function () {
$(document).ready(function () {
$('.custom-popup-div').click(function () {
$('#popup').removeClass('custom-popup-div');
$('#popup').addClass('custom-popup-div-expanded');
$('.custom-popup-remove-button').css("visibility", "visible");
})
})
})
$(function () {
$('.custom-popup-remove-button').click(function () {
console.log("Cancel clicked !");
$('#popup').removeClass('custom-popup-div-expanded');
$('#popup').addClass('custom-popup-div');
$('.custom-popup-remove-button').css("visibility", "hidden");
})
})
As for the CSS styling:
.custom-popup-div{
position: fixed;
bottom: 0;
right: 0;
margin-right: 15px;
margin-bottom: 15px;
width: 250px;
height: 150px;
background-color: yellow;
border: 1px solid #000000;
border-radius: 7.5px 7.5px 7.5px 7.5px;
}
.custom-popup-div-expanded{
position: fixed;
bottom: 10%;
top: 10%;
width: 80%;
left: 10%;
right: 10%;
height: 75%;
background-color: yellow;
border: 1px solid #000000;
border-radius: 7.5px 7.5px 7.5px 7.5px;
}
.custom-popup-remove-button{
position: relative;
top: 2.5%;
left: 97.5%;
visibility: hidden;
}
Edit: I forgot to mention that I also want the popup div to revert back to its original size. Thank you for your help!
Sincerely, Marcus