I'm creating a website where the user can click on an image to open a modal with menu items within, while the first modal works fine, subsequent modals do not.
JS Code:
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myImg");
// 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>
HTML where its used:
<div class="col-md-3">
<h2>Starters</h2>
<img src="http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2007/2/9/0/ie0102_coleslaw.jpg" height="100%" width="100%" id="myImg">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<br>
<h2>Starters</h2>
</div>
<div class="modal-body">
<p><b>PRODUCT <span style="display:inline-block; width: 75%;"></span> PRICE</b></p>
<hr>
<p> Humus <span style="display:inline-block; width: 78%;"></span> £3.00</p>
<p> Dolma <span style="display:inline-block; width: 78%;"></span> £3.20</p>
<p> Coleslaw <span style="display:inline-block; width: 77%;"></span> £1.50</p>
<p> Prawn Cocktail <span style="display:inline-block; width: 73.5%;"></span> £4.60</p>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<h2>Wraps</h2>
<img src="http://harryskebabs.com/images/demo/menu-main/menu-item-large-20.jpg" height="100%" width="100%" id="myImg">
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<br>
<h2>Starters</h2>
</div>
<div class="modal-body">
<p><b>PRODUCT <span style="display:inline-block; width: 75%;"></span> PRICE</b></p>
<hr>
<p> Chicken Wrap <span style="display:inline-block; width: 78%;"></span> £3.00</p>
<p> Doner Wrap <span style="display:inline-block; width: 78%;"></span> £3.20</p>
<p> Shish Wrap <span style="display:inline-block; width: 77%;"></span> £1.50</p>
<p> Kofte Wrap <span style="display:inline-block; width: 73.5%;"></span> £4.60</p>
</div>
</div>
</div>
</div>
The first modal box shown will work as expected, while the second will not show at all, i would rather not have to unnecessarily replicate JavaScript if i don't have to, which is why i tired this method.
Very new to JS and modal boxes, so any input would be appreciated, thanks.
The modal in modal.style.display = none refers to an element with the id of "Modal". You have two elements which have this but ids given to HTML elements need to unique.
This goes for all ids, so you'll have to change give your images unique ids too.
Related
So I currently have coded in HTML when a user clicks "Customize" a modal pops up with checkboxes. Once a checkbox is selected and the user clicks "Submit", what the user selected will show up on the page and the modal will vanish. What I'm trying to do is, have the selected content turn into a link (href) once selected. I've got it to where it makes the checkbox content a link in the modal but I don't want it there, I want it to convert into a link once it's been selected and the user clicks submit. The following is the code I currently have in HTML and JS
$('#youtube').change(function() {
var chb = document.getElementsByClassName('chkbx');
if (chb[0].checked) {
console.log("YOUTUBE selected");
$(this).next().html("<a href='https://www.youtube.com/'>YOUTUBE</a>");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal active" id="modal">
<div class="modal-header">
<div class="title">Please select preferred websites: </div>
<button data-submit-button class="submit-button" onclick="getValue()">Submit</button>
</div>
<div class="modal-body">
<input type="checkbox" class="chkbx" id="youtube" name="website" value="youtube"> YOUTUBE <br>
You can only use next if you have something next
Otherwise use .after() or parent().append()
$('#youtube').on("click",function() {
if (this.checked) {
console.log("YOUTUBE selected");
$(this).parent().next().html("<a href='https://www.youtube.com/'>YOUTUBE</a>");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal active" id="modal">
<div class="modal-header">
<div class="title">Please select preferred websites: </div>
<button type="button" data-submit-button class="submit-button">Submit</button>
</div>
<div class="modal-body">
<label><input type="checkbox" class="chkbx" id="youtube" name="website" value="youtube"> YOUTUBE </label>
<span>This is the next</span>
</div>
</div>
You can also use replaceWith if you want the checkbox to become a link
Here when submit is clicked
$('.submit-button').on("click",function() {
const $check = $("#youtube")
if ($check.is(":checked")) {
console.log("YOUTUBE selected");
$check.parent().replaceWith("<a href='https://www.youtube.com/'>YOUTUBE</a>");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal active" id="modal">
<div class="modal-header">
<div class="title">Please select preferred websites: </div>
<button type="button" class="submit-button">Submit</button>
</div>
<div class="modal-body">
<label><input type="checkbox" class="chkbx" id="youtube" name="website" value="youtube"> YOUTUBE</label>
</div>
</div>
I have created a bootstrap modal box and anchor link. When i clicked anchor link it's open modal popup. I have written jquery when link anchor link is clicked to show modal popup. Can any give me suggestion to solve this problem.
index.html
<div class="update-heading">Email Updates</div>
<div class="email_text">Please confirm which of the FREE email services you would like to receive from us, you can unsubscribe at any time:</div>
<div class="checkbox_list"><input type="checkbox" name="newsletter-daily" value="newsletter-daily" class="ind"><span> </span> <label style="width: 400px;">Compelo Energy Daily Update </label> <a class="pview" data-toggle="modal" href="#mprof" >preview</a></div>
<div class="checkbox_list"><input type="checkbox" name="newsletter-weekly" value="newsletter-weekly"><span> </span> <label style="width: 400px;">Compelo Energy Weekly Round-up </label><a class="pview" data-toggle="modal" href="#mprof" >preview</a></div>
Script.js
$(document).ready(function(){
$(".pview").click(function(event){
if($(this).parent().find(':checkbox').is(':checked')){
//alert('parent field is checked');
$('#mprof').modal('show');
console.log('if');
}else{
//alert('parent field is not hecked');
$('#mprof').modal('hide');
console.log('else');
}
});
});
It can't work, modal is an html construct and you must set it like it needs, so you need html for the modal and change the javascript becuase you are doing an on click on class pview that is not correct....Try this and look the differences....Bye...
<div class="update-heading">Email Updates</div>
<div class="email_text">Please confirm which of the FREE email services you would like to receive from us, you can unsubscribe at any time:</div>
<div class="checkbox_list">
<input type="checkbox" name="newsletter-daily" value="newsletter-daily" class="ind">
<span> </span> <label style="width: 400px;">Compelo Energy Daily Update </label>
</div>
<div class="checkbox_list">
<input type="checkbox" name="newsletter-weekly" value="newsletter-weekly">
<span> </span> <label style="width: 400px;">Compelo Energy Weekly Round-up </label>
</div>
<div class="modal bs-example-modal-md fade" id="mprof" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalMprof" >
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header"align="center">
<h4 class="modal-title" id="myModalMprof">Modal</h4>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">× </span>
<span class="sr-only">Chiudi</span>
</button>
</div>
<b><div class="modal-body" id="contentModalMprof">
</div></b>
<div class="modal-footer">
</div>
</div>
</div>
</div>
JS:
$(".checkbox_list").click(function(event){
if($(this).parent().find(':checkbox').is(':checked')){
$('#contentModalMprof').html('preview');
$('#mprof').modal('show');
}else{
$('#mprof').modal('hide');
}
});
I think there is also another problem because you are doing find checkbox and if is checked modal open but in this way you can have two checkbox checked, maybe it's bettere use radio button or you must do a js to check only one checkbox at time...or when you open the modal reset the checkebox prop checked to false, reset checked...Ciao
When i click on second or third div element nothing happens, but first always working, that is, opens the modal. When i change sites of div elements result is the same; when i click on first div it opens the modal but nothing happens on the other two, do i need for each div his own function with different id's
...here is the code HTML and JS
<div class="container">
<div class="row">
<div class="col-md-4 sector">
<h3>Services</h3>
<i class="fa fa-gear"></i>
<div class="over" id="myModal">
<span class="tooltiptext">Show more...</span>
</div>
</div>
<div class="col-md-4 sector">
<h3>About me</h3>
<i class="fa fa-address-card-o"></i>
<div class="over" id="myModal">
<span class="tooltiptext">Show more...</span>
</div>
</div>
<div class="col-md-4 sector">
<h3>Contact</h3>
<i class="fa fa-phone"></i>
<div class="over" id="myModal">
<span class="tooltiptext">Show more...</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-container" id="myMod">
<div class="modal-content">
<span class="close">×</span>
<h1>Heading</h1>
<p>Some text goes in here...</p>
</div>
</div>
<script type="text/javascript">
// Get the button that opens the modal
var over = document.getElementById('myModal');
// Get the modal
var modal = document.getElementById('myMod');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName('close')[0];
// When the user clicks the button, open the modal
over.onclick = function(){
modal.style.display='block';
}
// When the user clicks on <span> (x), close the modal
span.onclick = function(){
modal.style.display='none';
}
</script>
Rather than adding the onclick event to the elements per ID (which has to be unique) you should add it for each item with a certain class.
But my guess is, that you want to open different modals when you click one of your divs, so instead of setting an onclick event for every div in JS, I suggest using these functions to open and close your modals:
function openModal(modalID) {
document.querySelector("#"+modalID).style.display='block';
}
function closeModal(modalID) {
document.querySelector("#"+modalID).style.display='none';
}
you can use them on your elements like this:
<div class="col-md-4 sector">
<h3>Services</h3>
<i class="fa fa-gear"></i>
<div onclick="openModal('ServicesModal')" id="myModal">
<span class="tooltiptext">Show more...</span>
</div>
</div>
You can use class "over" to get each div and add a clicklistner to each div like this
var over = document.getElementsByClassName("over");
for (var i = 0; i < over.length; i++) {
over[i].addEventListener('click', function(){
modal.style.display='block';
}, false);
}
or you can use jQuery like this
$(function(){
$(".over").click(function(){
$("#myMod").show();
})
});
As Sven said it's bad practice to use the same Id in differents places.
You use var over = document.getElementById('myModal');
As you can see it's singular so when your code reach this point it only contains the first Element found in your page.
if you want to get every "modal" of your page you have to use document.getElementsByClassName(over);.
As you can see it's plural (getElementS).
Hope it will help you.
<div class="container">
<div class="row">
<div class="col-md-4 sector">
<h3>Services</h3>
<i class="fa fa-gear"></i>
<div class="over" id="myModal">
<span class="tooltiptext">Show more...</span>
</div>
</div>
<div class="col-md-4 sector">
<h3>About me</h3>
<i class="fa fa-address-card-o"></i>
<div class="over" id="myModal">
<span class="tooltiptext">Show more...</span>
</div>
</div>
<div class="col-md-4 sector">
<h3>Contact</h3>
<i class="fa fa-phone"></i>
<div class="over" id="myModal">
<span class="tooltiptext">Show more...</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-container" id="myMod" style="display:none">
<div class="modal-content">
<span class="close">×</span>
<h1>Heading</h1>
<p>Some text goes in here...</p>
</div>
</div>
<script type="text/javascript">
// Get the button that opens the modal
var over = document.getElementsByClassName('over');
// Get the modal
var modal = document.getElementById('myMod');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName('close')[0];
// When the user clicks the button, open the modal
for (var i=0; i < over.length; i++) {
over[i].onclick = function(){
modal.style.display='block';
}
}
// When the user clicks on <span> (x), close the modal
span.onclick = function(){
modal.style.display='none';
}
</script>
I have a bunch of pictures that when clicked, open a popup box with info about the selected picture, but all the popup boxes open at the same time.
To start, I have some
<ul class="cenas_top">
<li>
<div class="shape">
<div class="details">
<span class="heading">Direção</span>
<hr />
<!-- Trigger/Open The Modal -->
<button id="myBtn">Mais</button>
</div>
<div class="bg"></div>
<div class="base">
<img src=" alt="" />
</div>
</div>
<h3>Name</h3>
</li>
<li>
<div class="shape">
<div class="details">
<span class="heading">Direção</span>
<hr />
<!-- Trigger/Open The Modal -->
<button id="myBtn">Mais</button>
</div>
<div class="bg"></div>
<div class="base">
<img src=" alt="" />
</div>
</div>
<h3>Name</h3>
</li>
</ul>
Then, I have the boxes:
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content-->
<div class="modal-content" id="ef">
<div class="modal-header">
<span class="close">×</span>
<h2></h2>
</div>
<div class="modal-body">
<p>TEXT TEXT TEXT TEXT</p>
</div>
<div class="modal-footer">
</div>
</div>
<!-- Modal content-->
<div class="modal-content" id="fc">
<div class="modal-header">
<span class="close">×</span>
<h2></h2>
</div>
<div class="modal-body">
<p>TEXT TEXT TEXT TEXT</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
Finally, this is how the script looks:
<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>
What's missing here?
There are several problems with your code, some of which you haven't mentioned in the question but are obvious anyway:
1) All your modal content is within one div called "myModal". When the button is clicked, you make this div visible. Therefore, all the content within it will become visible. You need to only open the modal content which is applicable to the clicked button.
2) All your buttons have the same id. This is invalid HTML. Element IDs must be unique. As it stands, only your first button will ever respond to the click event. The others will be ignored because they are considered invalid elements.
3) You're only adding the close event to the first span. So again this won't work for any of the others.
Here's an example that works. Note the match-up between the data-content attribute of each button, and the id of the corresponding modal.
HTML
<ul class="cenas_top">
<li>
<div class="shape">
<div class="details">
<span class="heading">Direção</span>
<hr />
<!-- Trigger/Open The Modal -->
<button class="modal-button" data-content="ef">Mais</button>
</div>
<div class="bg"></div>
<div class="base">
<img src=" alt="" />
</div>
</div>
<h3>Name</h3>
</li>
<li>
<div class="shape">
<div class="details">
<span class="heading">Direção</span>
<hr />
<!-- Trigger/Open The Modal -->
<button class="modal-button" data-content="fc">Mais</button>
</div>
<div class="bg"></div>
<div class="base">
<img src=" alt="" />
</div>
</div>
<h3>Name</h3>
</li>
</ul>
<!-- The Modals -->
<div id="modal-ef" class="modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2></h2>
</div>
<div class="modal-body">
<p>TEXT TEXT TEXT TEXT</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
<div id="modal-fc" class="modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2></h2>
</div>
<div class="modal-body">
<p>TEXT TEXT TEXT TEXT</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
JavaScript
var showModal = function() {
var modalID = this.getAttribute("data-content");
var modal = document.getElementById('modal-' + modalID);
modal.style.display = "block";
};
var hideModal = function() {
this.parentElement.parentElement.parentElement.style.display = "none";
}
//event listeners to show the modals
var buttons = document.getElementsByClassName("modal-button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', showModal, false);
}
//event listeners to close the modals
var spans = document.getElementsByClassName("close");
for (var i = 0; i < spans.length; i++) {
spans[i].addEventListener('click', hideModal, false);
}
I am using the bootstrap 3 framework. I've created a modal window, it opens fine, I click the close button, nothing happens. I click outside the modal window and it closes returning me to my web page. I cannot get the close button to work. I've tried 'hide' 'toggle'... nothing. Any insight much appreciated!
> <div class="person"> <h2>Person name</h2> <p><a href="#"
> id="John-bio" class="position"> John Smiths Bio</a></p>
> <div class="modal hide" id="John">
> <div class="modal-header"> <h1> John Smith Bio</h1> </div>
> <div class="modal-body"> <p>With more than...</div>
> <div class="modal-footer"> Close </div>
> $(function() {
> $("#John-bio").click(function(e) { e.preventDefault();
> $("#John").modal('show'); }); });
You'll need to add a close action to the button like so: data-dismiss="modal"
<div class="modal hide" id="John">
> <div class="modal-header"> <h1> John Smith Bio</h1> </div>
> <div class="modal-body"> <p>With more than...</div>
> <div class="modal-footer"> Close
</div>