Skip to content

Instantly share code, notes, and snippets.

@Chris820 Chris820/modal.js
Last active Mar 31, 2019

Embed
What would you like to do?
Chunk of jQuery that could be used to open up a linked URL into a modal. Although hasn't been used in a long while.
/* Modal Script */
jQuery(function($) {$(document).ready(function() {
/* Modal windows */
$.fn.thedialog = function(settings) {
// Options
var o = $.extend({
title: 'h1,h2,h3,h4,h5,h6,legend,label,p',
focus: 'a,input,button,select,textarea,[tabindex]',
buttons: false
},settings);
// Return jquery
$(this).each(function() {
// Close any existing dialogs
$('#dialog').trigger('close');
// Disable tabbable elements with tabIndex="-1"
$('a,input,button,select,textarea,[tabindex],iframe').attr('tabIndex', '-1');
// Create modal overlay/background
var overlay = $('<div class="overlay"></div>');
// Styles for IE
overlay.css('opacity', 0.7).children(0).css('opacity',0);
// Dialog wrapper
var dialog = $('<div id="dialog" role="dialog" aria-labelledby="dialog-title"></div>');
// FadeIn effect on open
dialog.fadeIn('slow');
// Close event
dialog.bind('close',function() {
overlay.remove();
dialog.remove();
$('body').removeClass('blocked');
$(document).unbind('keydown.dialog focus.dialog');
$('a,input,button,select,textarea,[tabindex],iframe').removeAttr('tabIndex');
});
// Closelink with aria support
var closelink = $('<button class="dialog-close" aria-label="Close this dialog">Close</button>');
// Close button click
closelink.click(function() {
dialog.trigger('close');
return false;
});
// Close on esc key (27)
$(document).bind('keydown.dialog', function(e) {
if(e.which == 27) dialog.trigger('close');
});
// Close on background click
overlay.click(function() {
dialog.trigger('close');
return false;
});
// Dialog content
var dialogContent = $('<div class="dialog-content"></div>').append(this).appendTo(dialog);
closelink.appendTo(dialog);
// Specify dialog title (first heading in a dialog)
dialog.find(o.title).eq(0).attr('id', 'dialog-title');
// Add blocked class to body, append overlay and append dialog
$('body').addClass('blocked').append(overlay).append(dialog);
// Move focus to dialog title
if(dialogContent.find(o.focus).length) dialogContent.find(o.focus).eq(0).focus();
// Resize modal
modalResize();
});
};
// The Resize function, also triggers on window.resize
$(window).resize(function() {modalResize();});
var modalResize = function() {
var dialog = $('#dialog');
if (dialog && dialog.is(':visible')) {
var width = $(window).width()*0.65;
var height = $(window).height()*0.8;
dialog.css("width", width);
dialog.css("height", height);
var x = ($(window).width()*0.5) - (width*0.5);
var y = ($(window).height()*0.5) - (height*0.5);
$(window).scrollTop(y);
dialog.css("left", x + "px");
dialog.css("top", y + "px");
// If fitVids exists, do it
if ($.isFunction($.fn.fitVids)) {
dialog.fitVids();
}
}
};
// To ajax get the modal contents
$.openmodal = function(url) {
// Differentiate url from selector
var splitUrl = url.split(' ');
var justUrl = splitUrl[0];
splitUrl.shift();
if(splitUrl.length) var subset = splitUrl.join(' ');
// Get the ajax data
$.get(justUrl,function(data) {
// Make it a string
var response = $(data);
if(subset != ' ') response = response.find(subset);
if(response.length == 0) response=$('<div class="box-error">Modal window load error</div>');
response.thedialog();
});
};
// Any link with class="modal" will trigger this
$('a.modal').click(function(e){
if($(window).width() > 720 ){
$.openmodal($(this).attr('href')+' #content', {});
return false;
}
});
});}); // End document.ready and jQuery
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.