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
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');
}
});
});
What I Broke - Programming and Web Development 
Leave a Reply