Testing multiple modals on a site. Both modals will open fine. However, the second modal (contmodal) will not close. Also this seems to create an issue causing other JS to break.
//* Get the Newsletter Modal
var newsmodal = document.getElementById('newsletter-modal');
var contmodal = document.getElementById('contact-modal');
// Get the button that opens the modal
var newsbtn = document.getElementsByClassName("signup-button")[0];
var editbtn = document.getElementsByClassName("contact-button")[0];
// Get the <span> element that closes the modal
var modalspan = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
newsbtn.onclick = function() {
newsmodal.style.display = "block";
}
editbtn.onclick = function() {
contmodal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
modalspan.onclick = function() {
newsmodal.style.display = "none";
contmodal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == newsmodal) {
newsmodal.style.display = "none";
}
if (event.target == contmodal) {
contmodal.style.display = "none";
}
}
Your code looks fine.
Here's this example you should refer to - http://jsfiddle.net/3Vykc/
Box 1
<div id="openModal1" class="modalDialog">
<div>
X
<h2>Modal Box 1</h2>
<p>This is a sample modal box that can be created using the powers of CSS3. </p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
Box 2
<div id="openModal2" class="modalDialog">
<div>
X
<h2>Modal Box 2</h2>
<p><strong>Box 2</strong></p>
<p>yadda yadda</p>
</div>
More references:
Using multiple modal dialogs in one page
How can I close multiple bootstrap modals with the close button on the last popped modal
I added the following javascript to Abhinav Ralhan's solution:
//* Get the Newsletter Modal
var modal1 = document.getElementById('openModal1');
var modal2 = document.getElementById('openModal2');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal1 || event.target == modal2) {
window.location.href = "#"+close;
}
}
Related
For this webpage: https://www.wonderewereldvan.be/VakantieinBelgie/KalenderTest2.html I would like have a direct link to a modal popup.
Off course I searched Stackoverflow for possible solutions, and I tried several ones. However when using https://www.wonderewereldvan.be/VakantieinBelgie/KalenderTest2.html#myModal it doesnt't open the modal window.
The last piece of code I tried was
function popModal() {
// code to pop up modal dialog
}
var hash = window.location.hash;
if (hash.substring(1) == 'myModal') {
popModal();
}
Those are the details of the popup:
<div class="modal" id="myModal">
The code I found on W3Schools
<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>
Many thanks in advance for your help!
You can put the existing code into an event handler named hashchange :
window.addEventListener("hashchange", () => {
var hash = window.location.hash;
if (hash.substring(1) == "myModal") {
popModal();
}
});
Read more about this handler in MDN hashchange
I have a basic modal pop up from w3 schools https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal, and I want to use two links to close the modal, but when I try, nothing works, because both links that I add to close the modal stop working when I try to have 2 links to close the modal
Here is the link that closes the modal
Here is the javascript
// 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";
}
}
How can I add this button with class "close"
And also!! this button with class "close-2"
<span class="close-2"></span>
so I can have 2 buttons to close the modal, any help would be great appreciated
Firstly what you would do is set both close buttons as having the same class, so class="close".
Also use a single function for closing the modal dialog such as
function closeModal() {
modal.style.display = "none";
}
Then replace the following
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
with
var spans = document.getElementsByClassName("close");
for (let closeBtn of spans) {
closeBtn.onclick = closeModal;
}
The reason one of close buttons ceases to work is because document.getElementsByClassName() returns a HTMLCollection which represents a collection of found elements. Also the getElementsByClassName("close")[0] call returns the first element in the collection and as such only one close button receives the onclick event. To fix this, the solution is to not get only the first element but all of the elements then iterate through all of them and add the onclick handler to all the elements as demonstrated.
The class attribute unlike the id attribute does not have to be unique and as such both can have the same close value.
Complete working example:
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
close
<p>Some text in the Modal..</p>
</div>
</div>
<script>
function closeModal() {
modal.style.display = "none";
}
// 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 spans = document.getElementsByClassName("close");
for (let closeBtn of spans) {
closeBtn.onclick = closeModal;
}
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
I have a modal that is launched by a button. In addition to the button, I need it to launch on page load as well. Any way I can achieve this within confines of my current code?
// 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";
}
}
When you get the modal - simply set the style to display: block
var modal = document.getElementById('myModal');
modal.style.display = "block"
or better yet - have classes that have the styling and then add or remove the classes to show / hide the modal. You could have display: none set as the default and then an "active" class that allwos display: block when its added.
To show the modal
modal.classList.add('active')
to hide the modal
modal.classList.remove('active')
// css
#myModal{
display: none;
}
#myModal.active {
display: block;
}
I know this is probably simple but I have read and tried a bunch of answers on here and I cannot figure it out. How do I pass the variable 'booklink' to the jQuery function?
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btns = document.querySelectorAll('.ebtn');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
[].forEach.call(btns, function(btn) {
btn.onclick = function(event) {
modal.style.display = "block";
var booklink = jQuery(this).attr("data-id");
console.log(booklink);
// on submit open book link
jQuery('#mc4wp-form-1').submit(function () {
window.open(booklink);
})
}
})
// 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";
}
}
From what I can see you are using a mix of jQuery and vanilla javascript, this is not a bad thing but it can make things confusing in the future, try to stick to one style (i.e. jQuery OR vanilla javascript NOT both).
From what I can see from your code, your code should work as is since you're declaring the 'booklink' variable before the submit is called.
I've gone ahead and tidied up your code to match all jQuery and modified it slightly which should assist in passing the 'booklink' value.
// Get the modal
var modal = jQuery("#myModal");//return matching elemetns id(s) of #myModal
// Get the button that opens the modal
var btns = jQuery('.ebtn');//return matching elements with class(es) of .ebtn
//Declare booklink out of the event
var booklink = "";
$('.ebtn').on('click', function(event){
modal.css('display','block');
//Update booklink when processing the click event
booklink = jQuery(this).attr("data-id");
//Call the function to submit the form and open a new window
openBookLink(booklink);
});
// When the user clicks on <span> (x), close the modal
$('.close').on('click', function(){
modal.css('display','none');
})
// When the user clicks anywhere outside of the modal, close it
$(window).on('click', function(event) {
if (event.target == modal) {
modal.css('display','none');
}
});
function openBookLink(booklink){
jQuery('#mc4wp-form-1').submit(function () {
//This should match what booklink was set to above
window.open(booklink);
})
}
The main changes are declaring the booklink variable outside of the event and defining it's value when you process the click event, which it's then passed to a function.
In my application I have a button which is represented by -
<div id="hamburgerIconId" class="hamburgerIcon"></div>
When I click on this button, it opens a side navigation box which is not visible initially. Clicking on the same button closes the side navigation box. The HTML of side navigation looks like this -
<div id="pdAppSidenav" class="sidenav show-xs hidden-lg">
Life Insurance
<section id="cd-timeline" class="cd-container">
BLAH BLAH BLAH
</section>
<!-- cd-timeline -->
<div class="pd-content-bottom">
<h3>HELP DESK </h3>
<p>Open 7am-5pm </p>
</div>
</div>
Also, I have set up a masking layer that becomes visible when the side navigation box is opened. This layer's is sandwiched between the side navigation box and the webpage. It basically is used to darken and disable the background when the sidenav is opened. Clicking anywhere on the screen should also close the sidenav
The masking layer -
<div id="left-nav-mask">
</div>
Below is my Javascript/Jquery code -
function leftnav() {
var collapse_sidebar_modal = document.getElementById('pdAppSidenav');
var collapse_sidebar_icon = document.getElementById("hamburgerIconId");
var left_nav_mask = document.getElementById("left-nav-mask");
var isOpen = false;
collapse_sidebar_icon.onclick = function() {
if (isOpen == false) {
console.log(event.target);
collapse_sidebar_modal.style.display = "block";
collapse_sidebar_modal.style.width = "250px";
left_nav_mask.style.display = "block";
isOpen = true;
} else {
console.log(event.target);
collapse_sidebar_modal.style.display = "none";
collapse_sidebar_modal.style.width = "0px";
isOpen = false;
}
}
$(window).bind("click touchstart", function(event) {
if (event.target == left_nav_mask && isOpen == true) {
console.log(event.target);
left_nav_mask.style.display = "none";
collapse_sidebar_modal.style.display = "none";
collapse_sidebar_modal.style.width = "0px";
isOpen = false;
}
});
}
When I click on the button, it opens the sidenav, clicking it again closes the sidenav. Also, when the sidenav is open, clicking anywhere outside the sidenav closes it.
Now, when I use the mobile emulator provided in Chrome's dev tools, clicking on the button while the sidenav is open does not close it. What happens is that the window.onclick fires and immediately after that the onclick function of the button fires.
Does anyone know the solution to this issue?