Tag: guide

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.

Add Image

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

  

    ×
    
Modal Header
  
  

    
Test Modal
  
  

    Close
    Save Changes
  

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

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

    $(document).ready(function(){
        $('#test_modal').modal('show');
    });

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

$('#test_modal').modal('hide')

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:

   $('#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);
        }
    });

Or this CSS from StackOverflow:

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.

/* 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');                         
}        
}); 
});