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";
}
});
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";
}
The 'id03' seems working when user clicked outside of the modal then it will close, while 'id02' and 'id01' didnt works. User clicked outside the modal then nothing happens
<script>
function messagesending(e) {
document.getElementById("id01").style.display="block";
}
function refusealert(e) {
document.getElementById("id02").style.display="block";
}
function confirmalert(e) {
document.getElementById("id03").style.display="block";
}
<script>
// Get REFUSE modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
// Get CONFIRMATION modal
var modal = document.getElementById('id02');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
// Get SENDMESSAGE modal
var modal = document.getElementById('id03');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
$(document).ready(function(){
$("#oni").click(function(){
$("#container").toggle(1000);
});
</script>
Is there something that i missed? Basically 'id01', 'id02', 'id03' are in same css code, i just copied and paste with different content. Please refer to this https://jsfiddle.net/r3qt7fdg/
As kwiat1990 mentioned the problem is, what I read from your code, the var modal, which is global, gets overridden, and ends up as document.getElementById('id03'). The code inside the onclick functions is executed after the click. At that time event.target == modal will only be true for the sendmessage modal.
The easy fix is to move var modal inside the click function, making it local to the function. I've also removed the excess script tags and properly closed the $(document).ready function.
EDIT: of course window.onclick will set onclick property of window, so each one was overwriting the other and only the last one saved. So, adding event listeners was needed:
<script>
window.addEventListener("click", function(event) {
// Get REFUSE modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
if (event.target == modal) {
modal.style.display = "none";
}
});
window.addEventListener("click", function(event) {
// Get CONFIRMATION modal
var modal = document.getElementById('id02');
// When the user clicks anywhere outside of the modal, close it
if (event.target == modal) {
modal.style.display = "none";
}
});
window.addEventListener("click", function(event) {
// Get SENDMESSAGE modal
var modal = document.getElementById('id03');
// When the user clicks anywhere outside of the modal, close it
if (event.target == modal) {
modal.style.display = "none";
}
});
</script>
https://jsfiddle.net/r3qt7fdg/1/
Also, 1 event listener will be enough, for instance by checking the className of the element:
window.addEventListener("click", function(event) {
// When the user clicks on element with class="modal", close it
console.log(event.target); // element that was clicked
if (event.target.className == "modal") {
event.target.style.display = "none";
}
});
https://jsfiddle.net/r3qt7fdg/2/
Maybe better is listen for click on ".modal" itself. In jquery it would be:
$(".modal").click(function() {
if (event.target.className == "modal") {
$(event.target).hide();
}
});
var modalA = document.getElementById('id01');
// Get the modal
var modal = document.getElementById('id02');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
//alert(event.target)`enter code here`
if (event.target == modal) {
modal.style.display = "none";
}
if(event.target == modalA) {
modalA.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.
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";
}
}
}