Modal Popup – Twitter Bootstrap

Just a quick post on how to create a modal popup using twitter bootstrap:

Step #1:

Add the following to a page element such as a link or button in order to open the modal:

     href="modal_content_name"
     data-toggle="modal"

i.e.

<a type="button" class="btn" style="width:100%;" href="#test_modal" data-toggle="modal">Add Image</a>

Step #2:
Create a content div i.e.

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="modal fade" id="test_modal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">&times;</a>
    <h3>Modal Header</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save Changes</a>
  </div>
</div>

And that’s all there is to it, just make sure you’ve included the bootstrap-modal.js file.

Modal Popup - Twitter Bootstrap

Modal Popup - Twitter Bootstrap


Open Twitter Bootstrap Modal Popup on Page Load:
In order to open the modal dialog on page load simply add the following JavaScript:

1
2
3
4
5
<script type="text/javascript">
    $(document).ready(function(){
        $('#test_modal').modal('show');
    });
</script>

You can also close the modal popup manually by using the following JavaScript:

1
2
3
<script type="text/javascript">
$('#test_modal').modal('hide')
</script>

Adjust Modal Width:
In order to adjust the modal width you have two options, Javascript or CSS. You can use the following JavaScript mentioned on GitHub:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
   $('#test_modal').modal({
        backdrop: true,
        keyboard: true,
        show: false \\remove this if you don't want it to show straight away
    }).css({
        width: 'auto',
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    });
</script>

Or this CSS from StackOverflow:

1
2
3
4
5
6
body .modal-admin {
    //new custom width
    width: 750px;
    //must be half of the width, minus scrollbar on the left (30px)
    margin: -345px 0 0 -375px;
}

Show modal when the user scrolls past certain div
I’ve received another request on how to show the modal when a user scrolls to a certain div. The following should work, but please let me know if you have any issues.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* Wait for document to load */
$(document).ready(function(){
 
$(window).scroll(function(){
 
//Retrieve scroll distance from top
var top = $(window).scrollTop();
 
//Retrieve the divs distance from top of page
var div_distance = $('my_div').offset().top;
 
//Use this if you want a bit of a variable distance, for instance if they scroll 150 pixels past the div
var buffer_distance = 150;
 
//Check if scrolled past div
if(top >= div_distance && top <= (div_distance + buffer_distance)){
 
//Show modal - you may want to add checks etc to see if it's already show
$('#test_modal').modal('show');
 
} else {
 
//Hide the modal, have scrolled past - you may want to add some checks to see if it's already hidden etc
$('#test_modal').modal('hide');                         
}        
}); 
});

12 thoughts on “Modal Popup – Twitter Bootstrap

  1. Tom Harrison

    This is helpful in the case where the model is more like a popup (the modal HTML is there, just hidden) — I am trying to make my user edit pages open in a modal. So there are existing Rails routes (/users/edit/1) controllers, and views, then from one page I want to click a link to open the new page, or alternatively call the controller method as AJAX, have it insert the modal HTML and then display it. Any ideas?

    Reply
    1. Errors Post author

      Hey Tom, this isn’t too difficult – the easiest way is to simply bind an onclick event to the button you want to use to open the modal and then use this to fetch the partial via ajax. You can then render it using escape_javascript etc.

      I tend to place the modal on the page before hand and then fetch just the form itself via ajax. Just place a loader gif in the modal and then replace it with the partial once it has been fetched. This adds a little extra overhead, however it provides a better ux (in my opinion)

      Reply
    1. Chris Owens Post author

      Hey Cursos,

      Sorry about the late reply, have been busy! I’ve updated the post to include a quick guide on how to do it, please let me know if you have any trouble.

      Reply
        1. Chris Owens Post author

          Hey Ddnhf,

          Seem to be a few issues with styles there:

          Using Chrome:
          - Hitting the login button the overlay z-index is too high. Not sure if you’ve manually set the z-index somewhere but it is greater than the modal itself. Adjust the “.modal-backdrop” class to have a lower z-index to fix this bit.
          - The sign up button seems to work fine

          And just any FYI, no text is appearing in the modals in IE9. If I’m not looking at the right issues please let me know.

          Cheers,
          Chris

          Reply

Leave a Reply