I am trying to get this popup open from different buttons in the menu, however, the popup content would remain the same.
Thanks, Banick
function OpenModalT() {
var modal = document.getElementById('myModalT');
modal.style.display = "block";
}
function CloseModalT() {
var modal = document.getElementById('myModalT');
modal.style.display = "none";
}
<li>
<a href="#" onclick="OpenModalT();">Button 1</a>
<div id="myModalT" class="modal">
<div class="modal-content">
<span class="close" onclick="CloseModalT();">×</span>
<p>
<ppopup>
<br>
<br>
<strong>Dummy text Dummy text Dummy Text <br><br> Kind Regards
</strong>
</ppopup>
</p>
</div>
</div>
</li>
<li>
<a href="#" onclick="OpenModalT();">Button 2</a>
</li>
Here's an example with which you can have any number of modals and buttons:
<button type="button" data-modal="#some-modal-id">
to toggle your modalsconst elsModals = document.querySelectorAll(".modal");
const toggleModal = (ev) => {
const elBtn = ev.currentTarget;
const elModal = document.querySelector(elBtn.dataset.modal);
// Close all currently open modals:
elsModals.forEach(el => {
if (el !== elModal) el.classList.remove("is-active");
});
// Toggle open/close targeted one:
elModal.classList.toggle("is-active");
};
const elsBtns = document.querySelectorAll("[data-modal]");
elsBtns.forEach(el => el.addEventListener("click", toggleModal));
/*QuickReset*/ * {margin:0; box-sizing: border-box;}
.modal {
position: fixed;
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
left: 0; top: 0;
width: 100vw; height: 100vh;
transition: 0.4s;
backdrop-filter: blur(3px);
background: rgba(0,0,0,0.1);
pointer-events: none;
visibility: hidden;
opacity: 0;
}
.modal.is-active {
pointer-events: auto;
visibility: visible;
opacity: 1;
}
.modal-content {
position: relative;
background: #fff;
padding: 30px;
box-shadow: 0 5px 20px -5px rgba(0,0,0,0.3);
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
}
<div id="modal-regards" class="modal">
<div class="modal-content">
<button type="button" data-modal="#modal-regards" class="modal-close">×</button>
<p>Dummy text Dummy text Dummy Text<br>Kind Regards</p>
</div>
</div>
<div id="modal-help" class="modal">
<div class="modal-content">
<button type="button" data-modal="#modal-help" class="modal-close">×</button>
<p>If something is not clear,<br>feel free to ask.</p>
</div>
</div>
<button type="button" data-modal="#modal-regards">Kind regards</button>
<button type="button" data-modal="#modal-regards">Kind regards</button>
<button type="button" data-modal="#modal-help">Ask for help!</button>
Additionally:
”
is not quite the same as "
- such editor will mark and highlight those small typos.<ppopup>
is an invalid HTML5 tag. – Roko C. Buljan 16 mins ago<a href="#">
if you need a button. Use <button type="button">
instead.