Skip to content

Instantly share code, notes, and snippets.

@bc-zz

bc-zz/jquery.navi.js

Created July 22, 2010 21:13
Show Gist options
  • Save bc-zz/486599 to your computer and use it in GitHub Desktop.
Save bc-zz/486599 to your computer and use it in GitHub Desktop.
Download ZIP
A simple modal plugin for jQuery
Raw
jquery.navi.js
// Modals - Navi 0.1
// Usage:
// $.navi()
// <a href="{fallback_url}" data-modal="{id_of_modal}">Hey! Listen!</a>
jQuery.navi = function(){
jQuery('[data-modal]').click(function(e){
e.preventDefault()
var modal = jQuery('#' + $(this).attr('data-modal'))
// Create overlay mask
var overlay = jQuery('<div>', {
'class': 'overlay',
'css': {
'background-color': '#000',
'opacity': 0.65,
'position': 'fixed',
'width': '100%',
'height': '100%',
'top': 0,
'left': 0,
'z-index': 1000
}
})
var close = function(e){
overlay.remove()
modal.hide()
}
// Close modal when overlay or close link clicked
overlay.click(close)
modal.find('[href="#close"]').click(function(e){
e.preventDefault()
close()
})
// Position modal
modal.css({
'position': 'fixed',
'top': '50%',
'left': '50%',
'margin-left': -Math.floor(modal.width() / 2),
'margin-top': -Math.floor(modal.height() / 2),
'z-index': 1001
})
// Let there be light
jQuery(document.body).append(overlay)
modal.show()
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment