CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
UltimateBlob
UltimateBlob

Reputation: 84

Responsive CSS/Bootstrap: Show modal Dialog for small screen, otherwise show block element

I have a web page showing a list of items. When a user clicks on one of those items it shows information about that item. For a mobile user, I would like it to display a modal dialog that pops up and (pretty much) fills the screen - there's quite a lot of info to show. For a desktop, I would like this information to appear beside the list of items.

Does anyone know how you might go about designing this with as little mess as possible, ideally using the least styling possible to get it to work with Bootstrap, and preferably with minimal explicit Javascript? I am familiar with media queries, but short of copy-pasting big chunks of bootstrap.css, I'm not sure how to go about this.

Upvotes: 0

Views: 860

Answers (1)

poashoas
poashoas

Reputation: 1894

<a class="link" href="#">Toggle thingie</a>

<div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

if (!('ontouchstart' in document.documentElement)) {
    // desktop
    $('#myModal').hide();
}

$('.link').on('click', function (e) {
    e.preventDefault();

    if ('ontouchstart' in document.documentElement) {
        // mobile or tablet: do modal thingie
        $('#myModal').modal('toggle');
    } else {
        // desktop
        $('#myModal').show();
    }
}

Upvotes: 1

Related Questions