Last active
March 31, 2019 03:33
-
-
Save Chris820/c82adabce9ab135383bd5457bbf440d2 to your computer and use it in GitHub Desktop.
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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