CODEWITHSUNDEEP
twitter-bootstrapmobilebootstrap-modal
anipard
anipard

Reputation: 164

Hide Bootstrap modal in mobile

How do I hide Bootstrap modal in mobile. I tried to use modifier classes such as hidden-xs hidden-sm but fail. The modal would go to the bottom page, leaving the top page inaccessible.

Here's my code:

<div class="modal fade hidden-xs hidden-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top:1em;">
  <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-body">
       <img src="banner.jpg" height="388" width="558" alt="" class="img-rounded">
     </div>
    <div class="modal-footer" style="border:0">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>

Since hidden-xs and hidden-sm fail, I tried to change my css:

@media only screen and (max-device-width: 480px){
  #myModal{display: none;}
}

or

@media only screen and (max-device-width: 480px){
  .modal{display: none;}
}

but, they're also fail.

Upvotes: 3

Views: 4947

Answers (4)

Julian
Julian

Reputation: 1

This media query did the trick for me.

    @media(max-width:810px){
    #mymodal{
        display: none !important;
    }

    .modal-backdrop{
        display: none !important;;
    }
}

Upvotes: 0

NJF
NJF

Reputation: 1

Danko's answer above still left the darkened overlay on my page (even though no modal appeared) but this is what worked for me:

    $('#myModal').on('shown.bs.modal', function () {
        var width = $(window).width();  
        if(width < 768){
            $('#myModal').modal('hide') 
        }
    });

Upvotes: 0

Wasim Ahmad
Wasim Ahmad

Reputation: 409

as you said that your css is not working i would recommend using jquery method just add this before the modal html code <div class='check-width'>, and use the below script.

if($('.check-width').width() == 500){
   $('#myModal').modal('hide'); 

}
else{

}

Upvotes: 0

Danko
Danko

Reputation: 1864

Your media query is overwritten by jQuery. Try it with jQuery.

something like this:

$('#myModal').on('shown.bs.modal', function () {
    var width = $(window).width();  
    if(width < 480){
        $(this).hide(); 
    }
});

Upvotes: 4

Related Questions