CODEWITHSUNDEEP
javascripthtmljquerycss
Jatin verma
Jatin verma

Reputation: 71

How to show modal based on screen width?

I have two models one for desktop view and the second for mobile view. I want that on mobile view only mobile modal should display and not the other and same with the desktop view. This is my javascript code for this.

var width = $(window).width();
$(window).on('resize', function() {
if ($(this).width() !== width) {
width = $(this).width();

  }
});

 var myBtn=$('.myBtn');
 var modal1= $('.modal1');
 var mobilemodal1=$('.mobilemodal1');

   setInterval(function(){
  console.log(width);
  if(width>768)
   {
     myBtn.click(function(){
        modal1.css("display","block");
     });
   }
  else{
    myBtn.click(function(){
        mobilemodal1.css("display","block");
    });
   }
 },1000)

Here modal1 is my desktop modal and the mobile modal is for mobile view. myBtn is the class given to both the modals to trigger them when clicked. The problem is when I am on mobile screen size I click the button I get only mobile modal but then I stretch the screen size to desktop view then when I click the button I get both the modals. The same is the case when I start with the desktop screen. I do not know the reason for this peculiar behavior. Please help I have searched a lot over the internet. When I had no choice I came here. Please help.

Upvotes: 1

Views: 2442

Answers (2)

Robin
Robin

Reputation: 5427

You don't need multiple modal for responsiveness. You can(should) manage your modal responsive using css. Even you don't need media query. Just set modal height and modal width with vw & vh. See my demo example, hope you will figure out rest of your needs.

document.querySelector('.open-modal').addEventListener('click', () => {
  document.querySelector('.modal').style = "display: unset"
})
document.querySelector('.close-modal').addEventListener('click', () => {
  document.querySelector('.modal').style = "display: none"
})
* {
  box-sizing: border-box;
}
.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 50vw;
  min-height: 50vh;
  z-index: 99;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  display: none;
  padding: 15px;
}
.modal-content {
  position: relative;
  min-height: 40vh;
}
<button class="open-modal">Open Modal</button>

<div class="modal">
  <div class="modal-content">
    <h2>Modal Heading</h2>
    <div>
      <h4>Modal Body</h4>
      <p>This is modal body. laskdf lskdfjs lkdfjlskdfj klsdjf sl klsdfj sdlkf ksdjf slkdf kdjfow flskfjs oosjflskdfj osdkfj sdlkfj osdfj dfjs dfoskdf slkdfjs dfj sofjkdfj slkfjoifj kdfjsdlkjf sfjs dfjsdkfjsdfjowijfsdkfj dfkjd sfjdofijdfjd fdjf dlfjosfoeifjls fsdfsdf</p>
      <h5>laskjdfowelskdf</h5>
    </div>
    <div class="modal-footer">
      <button class="close-modal">Close</button>
    </div>
  </div>
</div>

Upvotes: 2

Nithin - Techidiots
Nithin - Techidiots

Reputation: 103

Check this out i don't know whether this work as you not provided snippets. So try it if not inform.Check out how this work at codepen

   var width = $(window).width();
   $(document).ready(function(){
    $(window).on('resize', function() {
    if ($(this).width() !== width) {
    width = $(this).width();
      }
    });
   });
    
      $(document).on('click','.myBtn',function(){
      if(width > 768)
       {
        $('.modal1').css("display","block");
      }else{
        $('.mobilemodal1').css("display","block");
       }
     });

Upvotes: 0

Related Questions