Question posted in
You can find the official documentation here.

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

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();
    
  });
});`
Tags:

2

Answers


  1. 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();
            });
        });
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search