Hi im writing a function that i can reuse to show/hide modals and on my website
but it does not seem to work. when i used the same code outside a funtion and using direct id and class names instead of variables it worked fine its only when im passing them in that it does not appear to work?
<input id="lrBtn" type="button" value="Login/Register" onclick="ShowModal('PopUpLR','closeLR');" />
function ShowModal(var popup,var closeBtn){
var modal = document.getElementById(popup);
var span = document.getElementsByClassName(closeBtn)[0];
modal.style.display = "block";
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
The way you define your ShowModal function is wrong You need to write it like this
function ShowModal(popup,closeBtn){
// your code
}
instead of
function ShowModal(var popup,var closeBtn)
{
// your code
}
Full code:
function ShowModal(popup,closeBtn){
var modal = document.getElementById(popup);
var span = document.getElementsByClassName(closeBtn)[0];
modal.style.display = "block";
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
Related
Source code for the modal content for one button
<script>
var modal = getElementById("myModal");
var btn = getElementById("myBtn");
var span = getElementByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclik = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
I am a new member to the community ! Sorry for misarrangement! Thanks in advance for your help
You might also look into using JQuery.
if you include the JQuery Library with your javascript code, then you can target the DOM elements like this:
$('.myBtn').on('click', function(event) { // Do something here. });
I am having some issues with closing my modal pop-up forms, one of them closes, though the other one does not. I am not really sure where the problem lies, it must be something trivial though. I have just started learning JS seriously, so I'd appreciate some help with it.
I must add that both of the modals open just fine.
// Get the modal
var modal = document.getElementById('modal');
// Get the button that opens the modal
var btn = document.getElementById("regbtn");
// Get the modal
var signinmodal = document.getElementById('signinmodal');
// Get the button that opens the modal
var signinbtn = document.getElementById("signinbtn");
// 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 the button, open the modal
signinbtn.onclick = function() {
signinmodal.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 the user clicks on <span> (x), close the modal
span.onclick = function() {
signinmodal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target === signinmodal) {
signinmodal.style.display = "none";
}
}
When you assign window.onclick = ... twice you override the last assignment to it, just like if you would assign a value to a variable:
val = 5;
val = 7; // 5 is now gone
You should combine them to the same function call to ensure that the events will persist
window.onclick = function(event) {
if (event.target === modal) {
modal.style.display = "none";
}
if (event.target === signinmodal) {
signinmodal.style.display = "none";
}
}
The same applies for the span tag
span.onclick = function() {
modal.style.display = "none";
signinmodal.style.display = "none";
}
I have a page which has 2 (but the potential of many many more) buttons which open up modal windows, each modal has a form and some text on it which is individual to that button.
All of these items are called from a Custom Post Type from within WordPress.
The issue I'm having is that I'm currently using a Modal Window JS and CSS:
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Then it's using the usual to open have the details for the Modal within the loop for the item on my page.
My issue is, is that the id is individual, so it only works once. I need to find a way to allow for a post_ID from the loop to be involved in the opening. I have tried adding "> and then changing out the var modal = document.getElementByID('myModal'); to document.querySelector("[id^='myModal-']"); but this didn't work.
The code is currently being used here: https://www.ubersmith.com/webinars-and-events/
You will see that the first "On Demand" link works but the second doesn't.
Can anyone help me work this out? I'm sure that I'm just missing one bit of the puzzle.
Any help would be great!
Thanks in advance :)
Your problem is that document.getElementById and document.querySelector will only ever get one element. Instead, change the modal and button ids to a class-name, say modal and modal-trigger. Then, find all of the article elements, and add the event listeners in a loop. For example,
var articles = document.querySelectorAll("article");
for (var i = 0; i < articles.length; i++) {
var article = articles[i];
var modal = article.querySelector(".modal");
var button = article.querySelector(".modal-trigger");
var closeButton = article.querySelector(".close");
// if there is no modal, ignore this article
if (!modal) continue;
button.onclick = function() {
modal.style.display = "block";
}
closeButton.onclick = function() {
modal.style.display = "none";
}
// add event listener instead so it can be added multiple times
window.addEventListener("click", function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
});
}
Thanks Jay :) I took what you did and found the solution:
var modalBtns = [...document.querySelectorAll(".register")];
modalBtns.forEach(function(btn){
btn.onclick = function() {
var modal = btn.getAttribute('data-modal');
document.getElementById(modal).style.display = "block";
}
});
var closeBtns = [...document.querySelectorAll(".close")];
closeBtns.forEach(function(btn){
btn.onclick = function() {
var modal = btn.closest('.modal');
modal.style.display = "none";
}
});
window.onclick = function(event) {
if (event.target.className === "modal") {
event.target.style.display = "none";
}
}
This did the job :)
Thanks for your help :)
I have a function that I am using in html for a popup user form.
var modal = document.getElementById('basemodal');
var btn = document.getElementById("basebutton");
var span = document.getElementById("close1");
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
I am using this script in multiple places within the html document.
The only thing that I can't get to work properly is the window.onclick.
Since there are various script statements with this window.onclick, this only works for the last popup user form. What this does is when someone clicks on the screen it closes the popup box.
Is there a way to have multiple window statements? I tried setting for instance, window1 = window; and window2 = window; with no luck.
Thank you in advance!
Possible solution with eventlistener?? I tried but no luck:
window.addEventListener("click", function(event)){
if (event.target == modal) {
modal.style.display = "none";
}
}
After playing around with some code this is the best solution:
window.addEventListener("click", function(event){
if (event.target == modal) {
modal.style.display = "none";
}
});
I am trying to add a click event to a button element with a dynamically changing id. However to actually get the popup to appear, I have to click the button twice... I know it is happening like this, because I am doing something wrong with click event. But I can't figure out how to solve the issue.
Can you? I am pulling my hair out over this...
Thanks so much in advance
// Get the modal
function getPopup(venue_id){
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn"+venue_id);
var venue = document.getElementById("title"+venue_id).innerHTML;
document.getElementById("eventTitle").innerHTML = "<h3>"+venue+"</h3>";
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
function sentPopup(){
document.getElementById('myModal').style.display ="none";
var modal = document.getElementById('thanksMessage');
var span = document.getElementById("close");
modal.style.display = "block";
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
<?php /* $venue_id is being populated by a php function which doesnt matter for this click issue to solve */
<button class="btn" id="myBtn'.$venue_id.'" onclick="getPopup('.$venue_id.')">Unverbindlich anfragen</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">x</span>
<p class="venuePopupTitle" id="eventTitle"></p>
<form>my form</form>
</div>
</div>
?>
Saskia, the reason you need to click twice, is that this:
btn.onclick = function() {
modal.style.display = "block";
}
Is inside the getPopUp function, which only gets called when you click the button. So when you click once, only then, it sets the onclick function to button.
You need to change this lines to perform the action immediately, so inside getPopUp, you need to do:
modal.style.display = "block";
Without the btn.onclick.
The same for the other button inside sentPopUp because you will have the same issues.
I would recommend you get rid of inline onclick attributes in your HTML and use unobtrusive style of writing javascript to avoid errors.