Skip to content

Instantly share code, notes, and snippets.

@jeromecoupe
Forked from croxton/gist:1505601
Created May 1, 2012 12:37
Show Gist options
  • Save jeromecoupe/2567707 to your computer and use it in GitHub Desktop.
Save jeromecoupe/2567707 to your computer and use it in GitHub Desktop.
User friendly modal windows for touch devices using Colorbox and Modernizr
$(document).ready(function(){
// colorbox
if ($('#modal').length > 0) {
var modalConfig = {
inline : true,
href : "#modal",
opacity : .75,
onLoad:function(){
$('#modal').css('display','block');
},
onCleanup:function(){
$('#modal').css('display','none');
}
}
if ( Modernizr.touch ) {
// config for touch devices like iphones, ipads
modalConfig['fixed'] = false; // position absolute to allow user to zoom in to modal window
modalConfig['width'] = '100%'; // fill the screen
modalConfig['height'] = '100%';
modalConfig['scrolling'] = true; // allow the modal window content to scroll with finger dragging
// bigger text
$('#modal').css('font-size','1.5em');
} else {
// config for desktops
modalConfig['fixed'] = true;
modalConfig['width'] = '75%';
modalConfig['height'] = '50%';
}
// open window on document ready
jQuery.fn.colorbox(modalConfig);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment