Here this bbcode simply doesn't work, nothing happens, is there any other configuration to make it work?Hi All, This is a bit of longshot but thought I would post to get some feedback and some insight. Using the W3Schools Modal example, I've hacked together something that almost works for phpbb, but not entirely. And I'm wondering if someone a bit sharper than me with Javascript could perhaps solve the issue or add some refinements.
The issue. I can use this BBCode below to create only one instance of a modal on a page. So if I add a second modal, it will not work. I know this is completely a hack job, and wrong in so many ways. But I'm a bit desperate for a functional modal system where I can add multiple modals to a post each with different content. Incidentally, on the W3Schools website, the same result occurs. In other words if you add another modal, it will not open either, leading me to conclude it's not necessarily a phpBB issue, but probably something to do with Javascript. Insight and/or a solution would be much appreciated.
BBCodeCode:
[modal={TEXT1}]{TEXT2}[/modal]
HTML ReplacementCode:
<style>.myBtn:hover { text-decoration: underline; }/* The Modal (background) */.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}/* Modal Content */.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 50%;}/* The Close Button */.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold;}.close:hover,.close:focus { color: #000; text-decoration: none; cursor: pointer;}</style><!-- Trigger/Open The Modal --><button id="myBtn"><span class="myBtn" style="color: #FF0000; font-weight: bold;">{TEXT1}</span></button><!-- The Modal --><div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">×</span> {TEXT2} </div></div><script>// Get the modalvar modal = document.getElementById("myModal");// Get the button that opens the modalvar btn = document.getElementById("myBtn");// Get the <span> element that closes the modalvar span = document.getElementsByClassName("close")[0];// When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block";}// When the user clicks on <span> (x), close the modalspan.onclick = function() { modal.style.display = "none";}// When the user clicks anywhere outside of the modal, close itwindow.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; }}</script>
Statistics: Posted by eunaumtenhoid — Sat Jan 04, 2025 3:46 pm