ani_css ani_css - 2 months ago 13
jQuery Question

What is the logic of jquery window.width?

I have created a signup form and whenever I click my input field, a modal has to open responsively. It's okey here on mobile it work's the way I want but if I resize my window nothing happens so I want to give you some example

enter image description here

if you open my page on mobile you are going to see that when you click, the modal is opening.

but if you resize the window to less than 768px and if click the input field the modal is not opening

JQUERY

var $window = $(window),
$nogonder = $('.add-modal');

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

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

Answer

As I've mentioned in my comment. Currently, your code is executed only once probably when the page loads. In order to run your code again when the window is resized, you can do something like this:

function setModal(){
  var $window = $(window),
  $nogonder = $('.add-modal');

  if ($window.width() < 768) {
      $nogonder.on("click",function(){
        $("#parallaxPopup").modal('show');
      });
   } else {
      $nogonder.off("click");
      $("#parallaxPopup").modal('hide');
      $("#rezervasyonPopup").modal('hide');
      $("#popupCheckin").modal('hide');
   }
}
setModal();
$(window).resize(setModal);