Implementing Modal Popup Window in HTML
Question
I want to implement a simple Modal Overlay similar to this codepen in my website. Every time the view button (code is bellow) is clicked, I want to create the overlay. I am having a little trouble, can someone please help? Thank you
HTML code: (I know I have to add css from the codepen)
<div class="row">
<div class="col-lg-4">
<img class="thumbnail" src="image.jpg">
<div class="box-element product">
<h6><strong>Title</strong></h6>
<hr>
<a class="btn btn-outline-success" href="#">View</a>
<h4 style="display: inline-block; float: right"><strong>Free!</strong></h4>
</div>
</div>
</div>
2 answers
solution1
0 2021-07-15 22:31:44
As Leonardo mentioned, you need to include the JavaScript to make the modal work.
In CodePen, obviously there's just a panel for that. But what actually happens is that it takes whatever is in that panel and inserts it into a <script> inside of the <body> .
Since the JS in the pen you linked to actually includes jQuery, you would have to include a separate <script> that links to some CDN that hosts jQuery. You'd want to include that above the modal script in your document, probably in the <head> .
So your HTML would look something like this:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- other stuff... -->
</head>
<body>
<div class="page-wrapper">
<!-- your page content here -->
<button class="trigger">click me</button>
</div>
<div class="modal-wrapper">
<button class="trigger">X</button>
<p>I am a modal.</p>
</div>
<script>
$(document).ready(function() {
$('.trigger').click(function() {
$('.modal-wrapper').toggleClass('open');
$('.page-wrapper').toggleClass('blur');
return false;
});
});
</script>
</body>
</html>
One thing to note: There's a bad practice in that pen, which is that it uses an <a> as a button. Instead, you should use an actual <button> and use CSS to make it look how you want.
solution2
0 ACCPTED 2021-07-15 22:46:33
I suggest you to use a specific <div> for the overlay.
Use a structur similar to the following:
<html>
<head>
...
</head>
<body>
<div class="main-container">
<p>This is the page main content</p>
</div>
<div class="modal-overlay" id="modal-overlay"></div>
<div class="modal-container">
<div class="modal-container-controls">
<button class="modal-container-close-button">Close modal button</button>
</div>
<div class="modal-container-content">
<p><strong>Modal title</strong></p>
<p>Modal content text 1</p>
<p>Modal content text 2</p>
</div>
</div>
<script src="js/scripts.js"></script>
</body>
</html>
So, modal will be the id of the div for the modal and modal-overlay will be the id of the div for the overlay. In your code I would have something like this:
<div class="row">
<div class="col-lg-4">
<img class="thumbnail" src="image.jpg">
<div class="box-element product">
<h6><strong>Title</strong></h6>
<hr>
<a class="btn btn-outline-success" id="open-modal-button" href="#">View</a>
<h4 style="display: inline-block; float: right"><strong>Free!</strong></h4>
</div>
</div>
</div>
<div id="modal">
<div id="close-modal-button">Close button</div>
<div>Modal content</div>
</div>
<div id="modal-overlay"></div>
Now, let's think about the CSS for the modal:
#modal{
display: none;
position: fixed;
top: 50%;
left: 50%;
z-index: 101;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
}
#modal.modal-visible{
display: block;
}
As you can see, by default the modal has a display: none property. Then, when you click on the button you will add the class .modal-visible that has the CSS property display:block .
Next step is preparing the CSS for the modal-overlay :
#modal-overlay{
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
#modal-overlay.modal-overlay-visible{
display: block;
}
The behaviour for modal-overlay is similar to box-element : when user clicks on open-modal-button , your JS code will add the .modal-overlay-visible class to the modal overlay <div> element.
Finally, let's see an example of JS code:
var openModalButton = document.getElementById("open-modal-button");
var closeModalButton = document.getElementById("close-modal-button");
var modalOverlay = document.getElementById("modal-overlay");
var modal = document.getElementById("modal");
// function that open modal and display the overlay
openModalButton.addEventListener("click", event => {
modalOverlay.classList.add("modal-overlay-visible");
modal.classList.add("modal-visible");
});
// function that closes the modal and remove the overlay
closeModalButton.addEventListener("click", event => {
modalOverlay.classList.remove("modal-overlay-visible");
modal.classList.remove("modal-visible");
});
Hope that my answer can help you :) You can find out more on my article here and on a GitHub example here .
I've updated my answer with a live working snippet:
var openModalButton = document.getElementById("open-modal-button"); var closeModalButton = document.getElementById("close-modal-button"); var modalOverlay = document.getElementById("modal-overlay"); var modal = document.getElementById("modal"); // function that open modal and display the overlay openModalButton.addEventListener("click", event => { modalOverlay.classList.add("modal-overlay-visible"); modal.classList.add("modal-visible"); }); // function that closes the modal and remove the overlay closeModalButton.addEventListener("click", event => { modalOverlay.classList.remove("modal-overlay-visible"); modal.classList.remove("modal-visible"); });
#open-modal-button { width: 150px; display: block; margin: -25px 0 0 -75px; padding: 1em 0; position: absolute; top: 50%; left: 50%; font: 1.125em "Arial", sans-serif; font-weight: 700; text-align: center; text-decoration: none; color: #fff; border-radius: 5px; background: rgba(217, 67, 86, 1); } #modal-overlay { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(255, 257, 153, 0.75); visibility: hidden; opacity: 0; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } #modal-overlay.modal-overlay-visible { visibility: visible; opacity: 1; } #modal { width: 600px; height: 400px; display: block; margin: 50% 0 0 -300px; position: relative; top: 50%; left: 50%; background: #fff; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #modal.modal-visible { margin-top: -200px; opacity: 1; } .head { width: 90%; height: 32px; padding: 1.5em 5%; overflow: hidden; background: #01bce5; } #close-modal-button { width: 32px; height: 32px; display: block; float: right; } #close-modal-button::before, #close-modal-button::after { content: ""; width: 32px; height: 6px; display: block; background: #fff; } #close-modal-button::before { margin-top: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #close-modal-button::after { margin-top: -6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .content { padding: 5%; }
<html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="row"> <div class="col-lg-4"> <img class="thumbnail" src="image.jpg"> <div class="box-element product"> <h6><strong>Title</strong></h6> <hr> <a class="btn btn-outline-success" id="open-modal-button" href="#">View</a> <h4 style="display: inline-block; float: right"><strong>Free!</strong></h4> </div> </div> </div> <div id="modal-overlay"> <div id="modal"> <div class="head"> <a id="close-modal-button" href="javascript:;"></a> </div> <div class="content">Modal content</div> </div> </div> <script src="scripts.js"></script> </body> </html>
And here you can find the Codepen.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.