css for modal code example
Example 1: modal pop up html css
<button class="trigger">Click here to trigger the modal!</button>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h1>Hello, I am a modal!</h1>
</div>
</div>
Example 2: modal pop up html css
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
Example 3: how to make popup modal in jquery with example
<!-- AJAX response must be wrapped in the modal's root class. -->
<div class="modal">
<p>Second AJAX Example!</p>
</div>
Example 4: how to make popup modal in jquery with example
$("#sticky").modal({
escapeClose: false,
clickClose: false,
showClose: false
});