Why does my jQuery open and close my pop up before clicking the body?

Question

I have a pop up that opens up so users can reply to messages. now when a user clicks <a> tag it opens the popup, but it doesn't close if they hit anywhere in the body. I tried fixing this by using jquery but it keeps opening and then closing the pop up again immediately after clicking on the <a> tag.

My <a> tag:

<a class="msg-icon2"  onclick="openReplyModal(<?php echo $msg_id ; ?>)">
    <i class="fas fa-reply"></i>
</a>

My jquery:

var msg_id;

function openReplyModal(id) {
  msg_id = id
  $("#reply_modal" + msg_id).fadeIn();
  jQuery(document).ready(function($) {
    jQuery("body").click(function() {

      $("#reply_modal" + msg_id).fadeOut();
    });
  });
}

How can I adjust my code so that when the user clicks the button for the first time it would open the popup and stay opened unless he clicks anywhere in the body?

here is the code i got from the answer below:

`function openReplyModal(id, event) {
  $(".modal").hide(); // close other modal
  msg_id = id
  $("#reply_modal" + msg_id).fadeIn();
  event.preventDefault();
  event.stopPropagation();
  
}

jQuery(document).ready(function($) {
  // click on modal doesn't hide itself
  $("body").on("click", ".modal", function(e) {
    e.stopPropagation();

  });
  // clicl anywhere else hides all modals
  $(window).click(function() {
    $(".modal").fadeOut();
    
  });
});`

You shouldn't bind an event handler inside another event handler. Every time you click you're adding another event handler to the modal. — Barmar, Aug 11 '20 at 05:17
yeah i realize that but i dont know how to do it in the right way @Barmar can you please advise? — , Aug 11 '20 at 05:18

score 0 · Answer 1 · answered Aug 11 '20 at 04:59

0

jQuery(document).ready(function ($) {
            function openReplyModal(id) {
                msg_id = id
                $("#reply_modal" + msg_id).addClass('model-open').fadeIn();
            }

            $('body').click(function (e) {
                $('.model-open').removeClass('open').fadeOut();
            });
        });

answered Aug 11 '20 at 04:59

San Trần Nam

21
3

this seems really good, but now its not opening my pop up at all. is there anything i should change in my tag? – Aug 11 '20 at 05:01
2

it is giving me this error now: `Uncaught ReferenceError: openReplyModal is not defined at HTMLAnchorElement.onclick ` – Aug 11 '20 at 05:07
2

Functions called from HTML `onclick` have to be defined in the global scope, not inside `$(document).ready()`. – Barmar Aug 11 '20 at 05:18
so what can i do to adjust this? @Barmar – Aug 11 '20 at 05:19
@techie_28 as barmar said the function should be global not inside $(document).ready(). – Aug 11 '20 at 05:33
then you do not need the `.ready()` method at all.. move it out & place it in a `script` tag right after the `head` tag – techie_28 Aug 11 '20 at 05:52

Barmar · Accepted Answer · 2020-08-11T05:53:31.180

0

Give all your modals a common class, such as class="reply_modal". Then you can have a general click handler that fades them all out when you click on the body.

The reason that the modal closes immediately is that the click event bubbles out from the <a> to the body, so it closes the modal. I added event.stopPropagation() to the function so it won't bubble out.

Use $(window).click() to detect clicks anywhere in the window outside the element. See How do I detect a click outside an element?.

var msg_id;

function openReplyModal(id, event) {
  $(".reply_modal").hide(); // close other modal
  msg_id = id
  $("#reply_modal" + msg_id).fadeIn();
  event.preventDefault();
  event.stopPropagation();
}

jQuery(document).ready(function($) {
  // click on modal doesn't hide itself
  $("body").on("click", ".reply_modal", function(e) {
    e.stopPropagation();
  });
  // clicl anywhere else hides all modals
  $(window).click(function() {
    $(".reply_modal").fadeOut();
  });
});

.reply_modal {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="msg-icon2" onclick="openReplyModal(1, event)" href="#"> <i class="fas fa-reply">open 1</i></a>
<a class="msg-icon2" onclick="openReplyModal(2, event)" href="#"> <i class="fas fa-reply">open 2</i></a>
<div id="reply_modal1" class="reply_modal">This is modal 1<br>
  <input></div>
<div id="reply_modal2" class="reply_modal">This is modal 2<br>
  <input></div>

edited Aug 11 '20 at 05:53

answered Aug 11 '20 at 05:36

Barmar

741,623
53
500
612

thats the problem, i cant give them all the same id. – Aug 11 '20 at 05:37
Not the same ID, the same class. – Barmar Aug 11 '20 at 05:37
But if you can't do that, you can use the selector `[id^=reply_modal]` to match all IDs beginning with `reply_modal` – Barmar Aug 11 '20 at 05:38
good answer, but your code still produces the same problem i got. opens then closes immediately – Aug 11 '20 at 05:42
1

I was originally having that problem until I added `event.stopPropagation()`. – Barmar Aug 11 '20 at 05:43
how do i add the event paramater in my properly? i did it this way `onclick="openReplyModal('','event')">` – Aug 11 '20 at 05:46
1

Don't quote `event`, that makes it a string rather than a variable. – Barmar Aug 11 '20 at 05:48
okay amazing now its opening, but not closing when i click on the body still. i dont understand why, your code seems to be perfectly fine – Aug 11 '20 at 05:49
1

Change `$("body")` to `$(window)` to detect a click anywhere in the window, since not eveything is in `body`. – Barmar Aug 11 '20 at 05:54
i played around the code a bit, now it works. really thank you alot for helping. this means alot to JS newbies like me – Aug 11 '20 at 05:54
but one problem i am facing now is that it closes the pop up when i try to enter my text area. – Aug 11 '20 at 05:56
Do you have the code after the comment `// click on modal doesn't hide itself`? – Barmar Aug 11 '20 at 05:57
yes, my code is the same as yours now i removed something from the click doesnt hide it self part, but the part thats not working is the //click anywhere else to hide all other modals – Aug 11 '20 at 06:00
Do you have any other uses of `stopPropagation()`? Those will prevent the click from getting to the body. – Barmar Aug 11 '20 at 06:02
It works for me, so you must have some other code that's interfering. – Barmar Aug 11 '20 at 06:06
ill post it as an answer – Aug 11 '20 at 06:12
Answers should only be used for solutions, not continuations of the question. Add it as an addition to the question. – Barmar Aug 11 '20 at 06:14
i posted it, my html is detecting the click on the body, but never executing the function `$(".modal").fadeOut(); `why is that? – Aug 11 '20 at 07:04

Why does my jQuery open and close my pop up before clicking the body?

2 Answers2