ani_css ani_css - 2 months ago 11
jQuery Question

jquery window width issue

in this demo if you click inputs in dark blue area (NUMARANI GONDER) you gonna see nothing happend but if you click on responsive mode (less than 768px) u gonna see modal has been opening it's okey this is the thing that I want but if u click again on dekstop mode black element has been opening

I'm using bootstrap modal and my JS Codes

var $window = $(window),
$nogonder = $('.add-modal');
$(window).on('resize', function () {
if ($window.width() < 768) {
$nogonder.on("click",function(){
$("#parallaxPopup").modal('show');
})

}else{
$("#parallaxPopup").modal('hide');
$("#rezervasyonPopup").modal('hide');
$("#popupCheckin").modal('hide');
};
});

Answer

Cause:

Notice that it only happens if hit the case where the window is < 768 and then you resize it to be larger. If you start large it is fine.

This is because you are not unbinding the event.

Solution:

 var $window = $(window),
     $nogonder = $('.add-modal');
     $(window).on('resize', function () {
        if ($window.width() < 768) {
          $nogonder.on("click",function(){
            $("#parallaxPopup").modal('show');
          })

       }else{
        $nogonder.off("click");
        $("#parallaxPopup").modal('hide');
        $("#rezervasyonPopup").modal('hide');
        $("#popupCheckin").modal('hide');
       };
     });