i have a problem with showing popout window. I have 2 popout windows. They are generated through php foreach (in echo)... The problem is, every time is gonna show only the FIRST span on the page, but that SECOND doesn't work. PHP code here:
echo __( "<div class='action' style='margin-bottom: -20px'>
<div id='box' style='background-color:". $active_row->color .";width: 10px;height:10px;float:left;margin:5px 10px 0px 10px;'> </div>
<span id='myBtn' style='color:orange'> ". $active_row->title ."<span id='GoogleADD' style='float:right; color:orange; text-decoration:underline'> Add </span> </span> <span id='end' style='float:right; margin-right: 10px'>". $endDateString ."</span> <span style='float:right'> - </span> <span id='start' style='float:right; margin-left:10px'> ". $newDateString ." </div> <!-- Trigger/Open The Modal -->
<!-- The Modal -->
<div id='myModal' class='modal'>
<!-- Modal content -->
<div class='modal-content'>
<div class='modal-header'>
<span class='close'>×</span>
<h2 style='text-align:center'>Podrobnosti o akci</h2>
</div>
<div class='modal-body'>
<p> Název akce: <b>". $active_row->title ."</b> </p>
<p> Podrobnosti: <b>". $active_row->description ." </b> </p>
<p> Začátek akce: <b>". $newDateString ." </b> </p>
<p> Konec akce: <b>". $endDateString ." </b> </p>
<p> Přidat akci do vašeho Google Kalendáře: <b style='color: orange; text-decoration: underline'> ADD ME! </b> </p>
</div>
<div class='modal-footer'></div>
</div>
</div>");
Then I have a script, where i want to show them, when someone click on them. I am checking the ID on "third" row here (span id="myBtn").
Here is my jQuery script.
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById('myBtn');
// Get the <span> element that closes the modal
var 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 modal
span.onclick = function() {
modal.style.display = 'none';
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
}
</script>"
Can you help me out please ? Thanks a lot!
I think this will help you to achieve your goal. I have removed some unwanted details from your example, and try to keep it as simple as possible.
<div class='action' >
<span class="MyBtn" rel="myModal1" style='color:orange'>Title 1</span>
</div>
<!-- The Modal 1 -->
<div id='myModal1' class='modal' style="display:none">
<!-- Modal content 1 -->
<div class='modal-content'>
<div class='modal-header'>
<span class='close' rel="myModal1" >X</span>
<h2 style='text-align:center'>Popup 1 header</h2>
</div>
<div class='modal-body'>'Popup 1 content goes here...'</div>
<div class='modal-footer'></div>
</div>
</div>
<div class='action' >
<span class="MyBtn" rel="myModal2" style='color:orange'>Title 2</span>
</div>
<!-- The Modal 2 -->
<div id='myModal2' class='modal' style="display:none">
<!-- Modal content 2-->
<div class='modal-content'>
<div class='modal-header'>
<span class='close' rel="myModal2" >X</span>
<h2 style='text-align:center'>Popup 2 header</h2>
</div>
<div class='modal-body'>'Popup 2 content goes here...'</div>
<div class='modal-footer'></div>
</div>
</div>
The above html portion can be generated with the help of any looping structure. Please notice that I have write the id of the modal container in rel attribute at two different places.
In the span tag with MyBtn class.
In the span tag with close class.
You need to generate the unique id for your modal cotainer and also should be written there. (You can use $active_row->ID, insted of the serial number)
Here is the script, which will open and close the modal box.
<script type="text/javascript">
var button_click = function() {
var ModalID = this.getAttribute("rel");
document.getElementById(ModalID).style.display = 'block';
};
var close_click = function() {
var ModalID = this.getAttribute("rel");
document.getElementById(ModalID).style.display = 'none';
};
// Get the button that opens the modal
var btn = document.getElementsByClassName('MyBtn');
// Get the <span> element that closes the modal
var close = document.getElementsByClassName('close') ;
// Assign the events to the buttons (open & close)
for(iCount = 0; iCount < btn.length; iCount++) {
btn[iCount].addEventListener('click', button_click, false) ;
close[iCount].addEventListener('click', close_click, false) ;
}
</script>
I wish it will help enough.
Have a great time.
Related
I am trying to make multiple modals that show different stuff when opened but, only the first modal will close and the second modal won't close when I press the span button. when console logged it only shows the first modals spans id it won't show the second spans id. is their ant DRY way of fixing this.
HTML
<!--Work-->
<div id="work">
<h2>Work</h2>
<ul>
<li>
<button class="nobs-modal-btn"><img src="./assets/images/favicon.oe.ico" alt="No Ordinary Burritos website" width="200px" height="200px"></button>
<p>No ordinary burritos</p>
</li>
<li>
<button class="run-buddy-modal-btn"><img src="./assets/images/hero-bg.jpg" alt="" width="200px" height="200px"></button>
<p>Run buddy</p>
</li>
</ul>
</div>
<!-- end Work -->
<!-- nobs Modal -->
<div id="nobs-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<!-- run buddy Modal -->
<div id="run-buddy-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<img src="./assets/images/hero-bg.jpg" alt="">
</div>
</div>
js
// Get the modal
var nobsModal = document.querySelector("#nobs-modal");
const runBuddyModal = document.querySelector("#run-buddy-modal")
// Get the button that opens the modal
var nobsBtn = document.querySelector(".nobs-modal-btn");
const runBuddyBtn = document.querySelector(".run-buddy-modal-btn");
// Get the <span> element that closes the modal
var span = document.querySelector("span");
// display modal
nobsBtn.addEventListener('click', () => {
nobsModal.style.display = "block"
})
runBuddyBtn.addEventListener('click', () => {
runBuddyModal.style.display = 'block'
})
span.addEventListener('click', () => {
nobsModal.style.display = "none"
runBuddyModal.style.display = 'none'
})
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target == runBuddyModal) {
runBuddyModal.style.display = "none";
}
})
window.addEventListener("click", function(event) {
if (event.target == nobsModal) {
nobsModal.style.display = "none";
}
console.log(event)
})
I've been using the following code in Sharepoint and the buttons work just fine, however, when the modal appears it will only stay open for about 5 seconds and then it closes automatically. However, when I use this code outside of Sharepoint, all works as expected. I'm not sure if there is a specific piece that I am missing for Sharepoint.
<div class="icons">
<div class="icon-boxes">
<div class="icon-boxes-Asset">
<div class="zoom2">
<button class="btn-Asset" id="myBtn-Asset">
<img class="image-icon" src="Asset.jpg" alt=""><p>Asset</p>
</button>
</div>
</div>
</div>
</div>
<!-- This is the MODAL section, this popup section for each icon -->
<!-- This is the Asset Forfeiture MODAL section -->
<div class="Asset-Modal">
<div id="myModal-Asset" class="modal-Asset">
<!-- Modal Design -->
<div class="modal-content-Asset">
<div class="Asset-content">
<img class="image-icon" src="Asset.jpg" alt="">
<div class="Heading-Asset">
<div class="Heading-Asset-Name" alt="">
<h2>Asset Page</h2></div>
<div class="Heading-Asset-Address" alt="">
<h3>Washington State</h3></div>
</div>
<span class="close-Asset">×</span>
</div>
<div class="line"></div>
<div class="Asset-content-info">
<body>Lorem</body>
<br>
<br>
<body>Lorem.</body>
<p>Contact: (A) SOS Phillip (360) 333-3333</p>
<p>Asset Page</p>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal-Asset");
// Get the button that opens the modal
var btn = document.getElementById("myBtn-Asset");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-Asset")[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 modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
<!----------------------------------------->
I am looking to add multiple 'see more' buttons through out my page. At the moment when when I add a new one only the first button works and it breaks the second. So the first button works fine but when I've tried to copy this thumbnail over and make another one with the same see more details. The second button only changes the first thumbnails 'see more'
function toggle() {
let Text = document.getElementById('moreDetails');
if (Text.style.display == "none") {
Text.style.display = "block";
} else {
Text.style.display = "none";
}
}
document.getElementById("moreDetails").style.display = "none";
<div id="thumbnail-frame">
<div id="thumbnail" <div id="details">
<div id="moreDetails">
<h3> 001 </h3>
<h3> Saturate Radio </h3>
<h4> N00DS </h4>
</div>
<button title="Click to Show" type="button" onclick="toggle()">More Details</button>
</div>
</div>
<div id="thumbnail-frame">
<div id="thumbnail" <div id="details">
<div id="moreDetails">
<h3> 002 </h3>
<h3> Saturate Radio </h3>
<h4> N00DS </h4>
</div>
<button title="Click to Show" type="button" onclick="toggle()">More Details</button>
</div>
</div>
Main problem is that you can't have duplicate IDs on a page. Using classes works ok, or using relative position of your html elements.
function toggle(button){
// this works because the button is immediately after the "moreDetails" element it pertains to
let Text = button.previousElementSibling;
// this would work if you move the button so it is not immediately after moreDetails, but still in the same parent div.
//let Text = button.parentElement.querySelector(".moreDetails");
if(Text.style.display == "none"){
Text.style.display= "block";
}
else {
Text.style.display = "none";
}
}
const moreDetailses = document.querySelectorAll(".moreDetails");
for (let i = 0; i < moreDetailses.length; i++) {
moreDetailses[i].style.display = "none";
}
<div class="details">
<div class="moreDetails">
<h3> 001 </h3>
<h3> Saturate Radio </h3>
<h4> N00DS </h4>
</div>
<button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
<div class="details">
<div class="moreDetails">
<h3> 002 </h3>
<h3> Saturate Radio </h3>
<h4> N00DS </h4>
</div>
<button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
An id is only allowed to be used once per page, so that your toggle script will not work as expected when you have multiple elements with the same id.
To make it functional, and keep the required changes to a minimum, you should do the following:
switch id to class so the HTML is valid
allow your toggle button to pass along itself, for example onclick="toggle(this)"
move through the dom to get to the element you want to toggle (parentNode, firstChild etc.)
Similar questions like this has been posted before but none solved my issue. I'm trying to get enrollments.php page to show as a modal popup within index.php page
index.php
<button class="sess_btn sess_btn1" id="btn_enrol">Enrollments</button>
<div id="enrolModal"></div>
<script>
$(document).ready(function() {
//button modal
$('#btn_enrol').click(function(){
//using ajax post
$.post('enrollments.php',function() {
$('#enrolModal').html(); //Fill DIV enrolModal with enrollments.php content
})
//Calling Modal
$('#myModal').modal('show');
})
})
//-------------
</script>
enrollments.php
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
Also, when I try to click on the button several times there are quick blinks on the browser window. Any help will be appreciated, thanks.
Did the corrections in code to use the jquery API correctly. Not tested but, below code will work.
<script>
$(document).ready(function() {
//button modal
$('#btn_enrol').click(function(){
$.post( "enrollments.php", function( htmlContents ) {
$('#enrolModal').html( htmlContents );
//Show the Modal once you get enrollments.php html contents
$('#myModal').modal('show');
});
})
})
//-------------
</script>
Thanks for the answer, I got it done a little differently. Instead of a button I used a link as shown.
index.html
<script>
$(document).ready(function() {
$('.li-modal').on('click', function(e){
e.preventDefault();
$('#theModal').modal('show').find('.modal-content').load($(this).attr('href'));
})
});
</script>
Enrollments
<div class="modal fade text-center" id="theModal">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
enrollments.php
<script>
// Get the modal
var modal = document.getElementById('theModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
window.location.href = "updatesession.php";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
window.location.href = "updatesession.php";
}
}
</script>
<div id="model-content">
<div class="modal-header">
<span id="close" class="close">×</span>
<p>Session Editor</p>
</div>
<div class="modal-body">
<p>Select Session: </p>
</div>
<div class="modal-footer">
<p>Modal Footer</p>
</div>
</div>
Hello I want a pop up modal to appear once a user clicks on a div, i've got a script that works but it will only work on the first div rather than all of them. I've linked the code below. Where do you think i'm going wrong?
<!-- Trigger/Open The Modal -->
<div class="job-wrap">
<button id="myBtn">
<div class="job-box">
<div class="text-box">
<p class="position-type">Part Time</p>
<p class="job-role">Graphic Designer</p>
<p class="company-name">Deans School Supply</p>
</div>
<div class="time-box">
<p>9 Days ago</p>
</div>
</div>
</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p class="job-type">Full Time</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
First of all, id attribute should be unique on the page, don't multiply it! (and i'm assuming thats what you are doing, since you want multiple buttons to open modal). Secondly, you are matching only the first found id with the document.getElementById function. You should use the class attribute and the document.getElementsByClassName function instead.
<!-- Trigger/Open The Modal -->
<div class="job-wrap">
<button class="myBtn">
<div class="job-box">
<div class="text-box">
<p class="position-type">Part Time</p>
<p class="job-role">Graphic Designer</p>
<p class="company-name">Deans School Supply</p>
</div>
<div class="time-box">
<p>9 Days ago</p>
</div>
</div>
</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p class="job-type">Full Time</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btns = document.etElementsByClassName("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
for(var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
modal.style.display = "block";
}
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>