Responsive Bootstrap modal without page scrollbars

Question

I have this jsFiddle: http://jsfiddle.net/jsFiddlePlayer/8XdVt/338/

The Bootstrap modal needs to fill most of the page, be placed 100px from the top of the page and not cause the page to scroll. In other words, the entire modal needs to show in the display area. It also has a background image that needs to fit the modal in responsive fashion.

I've used this SO post to help, along with this article. But how do you limit the modal to the display area without scrollbars and keep the background image responsive? As you notice, in some screen sizes, the modal cuts off the people in the picture at the knees.

The solution can include jQuery so it doesn't have to be pure CSS. Thanks.

Here's the HTML:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#onload-popup">
  Launch modal
</button>

<div class="modal fade" role="dialog" aria-hidden="true" id="onload-popup">
    <div class="modal-dialog center-block">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4> 
        </div>
        <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
               Content goes here.
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Here's the CSS:

.modal {
  top:100px;  
}
.modal-backdrop {
  top:100px;
}
.modal-dialog {
  width: 95%;
  height: 100%;
  padding: 0;
}
.modal-content {
  min-height: 100%; 
  height: auto;
  border-radius: 0;
  overflow:auto;
  background-size: cover;
  background-image:  url('data:image/jpg;base64, /* ... image code ... */');
  background-repeat: no-repeat;
  background-attachment: local;
  background-position: center center;   
}

Update: Here's close to a solution: http://jsfiddle.net/jsFiddlePlayer/8XdVt/341/ It still doesn't play nice with the background image of the modal, as it gets clipped, but I don't think there's any way around that.

score 1 · Answer 1 · answered Jun 15 '15 at 13:51

1

Well, you need some viewport space to display the image correctly, don't know if this can help but here are the changes I made to remove scrollbars and to top-center the image (so it cannot have heads cut-off)

.modal {
  top:100px;
  overflow: hidden;
  overflow-y: hidden;
}
.modal-content {
  background-position: top center;   
}

answered Jun 15 '15 at 13:51

michelem

14,430
5
50
66

Thanks, @Michelem. But the content of the modal shouldn't be clipped (overflow-hidden). – Alex Jun 15 '15 at 13:59

score 1 · Answer 2 · answered Oct 12 '16 at 10:17

Try changing some of this css. Still there is some background image at bottom.

        .modal {
          top:7%;  

        }
        .modal-backdrop {
          top:10%;
        }        
        .modal-dialog {

          width: 100%;
          height: 100%;
          padding: 0;
        }

score 1 · Answer 3 · answered Oct 12 '16 at 10:40

If you want to do it on webkit you can use

.modal.fade.in::-webkit-scrollbar{
    display:none
}

But I'm not sure is it possible to do it on IE using differeng way, and there is another solution;

.modal.fade.in{
    overflow-y:hidden;
}

If you use second option, you should play some possition of modal to make it visible completely.

Responsive Bootstrap modal without page scrollbars

3 Answers3