how to close a jquery popup when i click evrywhere except the popup it self

Question

can anyone help me so slove my problem it's i made this jquery popup we have the popup "a" ,"b" ,"c" and "d" when i open a i want when i click everywhere i close the a but in my case when i click in "b" or "c"or "d" it open them

i want when the popup it opened when i click evrywhere except the poupup it close it

please help me and thank you

here is my code

                $('.open').click(function() {

                    var box = $('#' + $(this).attr('data-tab-id'));

                    var visibleBoxes = $('.popup:visible')
                    if (visibleBoxes.length > 0) {
                        $('.popup:visible').fadeIn(400);
                    }

                    box.fadeIn(400);


                });


                $('.close').click(function() {
                    $(".popup").fadeOut(400);

                });



                $(document).click(function(event) {
                    var $target = $(event.target);
                    if (!$target.closest('.popup,.open').length &&
                        $('.popup').is(":visible")) {
                        $(".popup").fadeOut(400);

                    }
                });

   .popup {
            margin-top: 40px !important;
            margin-left: 50px !important;
            width: 65%;
            display: none;
            overflow: hidden;
            background-color: red;
            border-radius: 5px;
            z-index: 99999;

        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-tab-id="test1" class="open">aaaaaaaaaaaa</a>
    <a data-tab-id="test2" class="open">bbbbbbbbbbbb</a>
    <a data-tab-id="test3" class="open">cccccccccccc</a>
    <a data-tab-id="test4" class="open">dddddddddddd</a>




    <div id="test1" class="popup">
        <a data-tab-id="test1" class="close">x</a>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    </div>
    
    <div id="test2" class="popup">
        <a data-tab-id="test2" class="close"><i class="fas fa-times"></i></a>
        <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
    </div>
     <div id="test3" class="popup">
        <a data-tab-id="test3" class="close"><i class="fas fa-times"></i></a>
        <p>cccccccccccccccccccccccccccccccccccccc</p>
    </div>
     <div id="test4" class="popup">
        <a data-tab-id="test4" class="close"><i class="fas fa-times"></i></a>
        <p>dddddddddddddddddddddddddddddddddddddd</p>
    </div>

https://stackoverflow.com/a/1089622/2275490: plus comment" I added && !$(event.target).parents("#foo").is("#foo") inside the IF statement so that any child elements won't close the menu when clicked. " — Vickel, Dec 30 '20 at 20:29
Although you will mess with want to the visuals, your code almost works, it just has a typo: You will want to `fadeOut` on visible popups `$('.popup:visible').fadeOut(400);` — imvain2, Dec 30 '20 at 20:37
sory brother i want when if the popup is open where i click it close it i tried your opion but it still didn't work ,also thank you for answering for me @Vickel — prince, Dec 30 '20 at 20:40
@imvain2 bro when i write the code like you said it doesn't even open it open and close directly — prince, Dec 30 '20 at 20:44

score 0 · Accepted Answer · answered Dec 30 '20 at 20:52

I reworked your $('.open').click() handler here.

Your have 3 cases:

1: There is a .popup visible and the click was made to open another. So you have to first fadeout the opened one and then (in the fadeout callback) open the new one.
2: There is a .popup visible and the click was made to open the same that is already opened. So just do nothing.
3: No .popup is visible. So just open the .popup.

$('.open').click(function(e) {

  var box = $('#' + $(this).attr('data-tab-id'));
  var visibleBoxes = $('.popup:visible')
  
  if (visibleBoxes.length && visibleBoxes[0].id !== box[0].id) {
    visibleBoxes.fadeOut(400,function(){
    console.log("case 1")
      box.fadeIn(400);
    })
  }else if (visibleBoxes.length && visibleBoxes[0].id === box[0].id) {
   console.log("case 2")
    // do nothing!
  }else{
   console.log("case 3")
    box.fadeIn(400);
  }
  

});


$('.close').click(function() {
  $(".popup").fadeOut(400);

});



$(document).click(function(event) {
  var $target = $(event.target);
  if (!$target.closest('.popup,.open').length &&
    $('.popup').is(":visible")) {
    $(".popup").fadeOut(400);

  }
});

.popup {
  margin-top: 40px !important;
  margin-left: 50px !important;
  width: 65%;
  display: none;
  overflow: hidden;
  background-color: red;
  border-radius: 5px;
  z-index: 99999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-tab-id="test1" class="open">aaaaaaaaaaaa</a>
<a data-tab-id="test2" class="open">bbbbbbbbbbbb</a>
<a data-tab-id="test3" class="open">cccccccccccc</a>
<a data-tab-id="test4" class="open">dddddddddddd</a>




<div id="test1" class="popup">
  <a data-tab-id="test1" class="close">x</a>
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>

<div id="test2" class="popup">
  <a data-tab-id="test2" class="close"><i class="fas fa-times"></i></a>
  <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>
<div id="test3" class="popup">
  <a data-tab-id="test3" class="close"><i class="fas fa-times"></i></a>
  <p>cccccccccccccccccccccccccccccccccccccc</p>
</div>
<div id="test4" class="popup">
  <a data-tab-id="test4" class="close"><i class="fas fa-times"></i></a>
  <p>dddddddddddddddddddddddddddddddddddddd</p>
</div>

how to close a jquery popup when i click evrywhere except the popup it self

1 Answers1