CODEWITHSUNDEEP
twitter-bootstrapbootstrap-modal
user2991438
user2991438

Reputation:

Is there a simple way to disable a specific modal for small screens?

I am using the modals in Twitter Bootstrap 3.1.1 and my modals are quite useless and borderline intrusive for screens narrower than 700 pixels.

Is there a simple feature or method to disable modals for small screens?

EDIT: Added relevant html:

<div class="post-body-img">
    <a data-toggle="modal" data-target="#myModal">
        <img src="test.jpg">
    </a>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <a data-dismiss="modal">
                    <img src="test.jpg">
                </a>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 2542

Answers (2)

Michael
Michael

Reputation: 1813

It is possible to hide a modal and its backdrop using CSS with an !important declaration, which overrides the inline display:block style on the modal elements when the modal is open. To hide it at a certain size just put the following CSS inside the relevant media query:

#yourModalID.modal.in,
#yourModalID.modal.in + .modal-backdrop.in
{
    display:none !important;
}

Upvotes: 0

Dan
Dan

Reputation: 9468

Yes, use Bootstrap responsive utilities classes. You could add visible-md and visible-lg to the modal link. The link that launches the modal will display only on medium (>=992px) or large (>= 1200px) screens.

More info at Bootstrap docs

If you don't want to hide the modal link on smaller screens, then just add another one. So you'll have two links like this:

<div class="post-body-img">
    <a class="hidden-xs" data-toggle="modal" data-target="#myModal"> <!--hidden on mobile, add hidden-sm to hide on tablet-->
        <img src="http://placehold.it/100">
    </a>
    <a class="visible-xs"> <!--shows on mobile, add visible-sm to show on tablet-->
      <img src="http://placehold.it/100">
    </a>
</div>

Bootply demo

Upvotes: 1

Related Questions