Jörn Zaefferer wrote:
>
> Tim Saker schrieb:
>> I've actually completed a solution to these problems prior to this post.
>> The
>> solution involves updates to both the modalContent plugin and it's
>> dependency, dimensions.js. I just need to finish polishing the changes
>> to
>> conform to the plugin guidelines.
>>
> Just release 'em when they are polished enough :-)
>
> --
> Jörn Zaefferer
>
> http://bassistance.de
>
>
> _______________________________________________
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
>
>
As things turned out I didn't make any changes to the dimensions.js
dependency, although there _is_ one minor problem with obtaining a
document's full height which could probably stand to be fixed. I'll just
address this in a separate post.
So, here is the modalContent plugin 0.9 enhanced for keyboard modality.
There are basically 3 changes from the original functionality:
1) Keyboard events are now only permitted on visible elements belonging to
the modal layer (child elements). Attempting to place focus on any other
page element will cause focus to be transferred back to the first (ordinal)
visible child element of the modal layer.
2) The modal overlay shading now covers the entire height of the document
except for a small band at the bottom, which is the height of a scrollbar (a
separate thread to be opened on this problem with dimension.js).
3) I removed the code that disables and reenables the scrollbars. This is
just a suggestion really, realizing it could be one of those little things
that causes fellow developers to become unnecessary foes ;=). Personally, I
found it an annoying behaviour to remove a visible scrollbar causing the
page elements to shift right upon modal popup, then back after closure. If
the intent was to prevent scrolling it doesn't anyway since you can still
page down with the keyboard. Maybe it should be a boolean option passed in
the function signature?
Note that I'm just posting the changes here to solicit public awareness and
input. I will attempt to notify the original author, Gavin Roy, in hopes
that the changes will make it into a next release.
jquery-modalContent-0.9.x.js
----------------------------------------
/**
* modalContent jQuery Plugin
*
* @version 0.9.x
* @since 2006-12-19
* @copyright Copyright (c) 2006 Glyphix Studio, Inc. http://www.glyphix.com
* @author Gavin M. Roy <[EMAIL PROTECTED]>
* @license MIT http://www.opensource.org/licenses/mit-license.php
* @requires >= jQuery 1.0.3 http://jquery.com/
* @requires dimensions.js
http://jquery.com/dev/svn/trunk/plugins/dimensions/dimensions.js?format=raw
*
* Call modalContent() on a DOM object and it will make a centered modal box
over a div overlay preventing access to the page.
* Create an element (anchor/img/etc) with the class "close" in your content
to close the modal box on click.
*/
/**
* modalContent
* @param content string to display in the content box
* @param css obj of css attributes
* @param animation (fade, slide, show)
* @param speed (valid animation speeds slow, medium, fast or # in ms)
*/
jQuery.modalContent = function(content, css, animation, speed) {
// if we already ahve a modalContent, remove it
if ( $('#modalBackdrop') ) $('#modalBackdrop').remove();
if ( $('#modalContent') ) $('#modalContent').remove();
// position code lifted from
http://www.quirksmode.org/viewport/compatibility.html
if (self.pageYOffset) { // all except Explorer
var wt = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop)
{ // Explorer 6 Strict
var wt = document.documentElement.scrollTop;
} else if (document.body) { // all other Explorers
var wt = document.body.scrollTop;
}
// Get our dimensions
var docHeight = $(document).outerHeight();
var winHeight = $(window).height();
var winWidth = $(window).innerWidth();
if( docHeight < winHeight ) docHeight = winHeight;
// Create our divs
$('body').append('<div id="modalBackdrop" style="z-index: 1000; display:
none;"></div><div id="modalContent" style="z-index: 1001; position:
absolute;">' + $(content).html() + '</div>');
// Keyboard and focus event handler ensures focus stays on modal elements
only
modalEventHandler = function( event ) {
target = null;
if( event ) { //Mozilla
target = event.target;
}
else { //IE
event = window.event;
target = event.srcElement;
}
if( $(target).filter('*:visible').parents('#modalContent').size() ) {
// allow the event only if target is a visible child node of
#modalContent
return true;
}
$('#modalContent .focus').get(0).focus();
return false;
}
$('body').bind( 'focus', modalEventHandler );
$('body').bind( 'keypress', modalEventHandler );
// Create our content div, get the dimensions, and hide it
var modalContent = $('#modalContent').top('-1000px');
var mdcTop = wt + ( winHeight / 2 ) - ( modalContent.outerHeight() / 2);
var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2);
modalContent.hide();
// Apply our css and positioning, then show
if ( animation == 'fade' )
{
$('#modalBackdrop').top(wt).css(css).height(docHeight +
'px').width(winWidth + 'px').show();
modalContent.top(mdcTop + 'px').left(mdcLeft + 'px').fadeIn(speed);
} else {
if ( animation == 'slide' )
{
$('#modalBackdrop').top(wt).css(css).height(docHeight +
'px').width(winWidth + 'px').show();
modalContent.hide().top(mdcTop + 'px').left(mdcLeft +
'px').slideDown(speed);
} else {
if ( animation == 'show')
{
$('#modalBackdrop').top(wt).css(css).height(docHeight +
'px').width(winWidth + 'px').show();
modalContent.top(mdcTop + 'px').left(mdcLeft + 'px').show();
}
}
}
// Bind a click for closing the modalContent
$('#modalContent .close').click(function(){close(); return false});
// Close the open modal content and backdrop
function close() {
$(window).unbind('resize');
$('body').unbind( 'focus', modalEventHandler );
$('body').unbind( 'keypress', modalEventHandler );
if ( animation == 'fade' ) {
$('#modalContent').fadeOut(speed,function(){$('#modalBackdrop').fadeOut(speed,
function(){$(this).remove();});$(this).remove();});
} else {
if ( animation == 'slide' ) {
$('#modalContent').slideUp(speed,function(){$('#modalBackdrop').slideUp(speed,
function(){$(this).remove();});$(this).remove();});
} else {
$('#modalContent').remove();$('#modalBackdrop').remove();
}
}
};
// Move and resize the modalBackdrop and modalContent on resize of the
window
$(window).resize(function(){
// Get our heights
var docHeight = $(document).outerHeight();
var winHeight = $(window).height();
var winWidth = $(window).width();
if( docHeight < winHeight ) docHeight = winHeight;
// Get where we should move content to
var modalContent = $('#modalContent');
var mdcTop = ( winHeight / 2 ) - ( modalContent.outerHeight() / 2);
var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2);
// Apply the changes
$('#modalBackdrop').height(docHeight + 'px').width(winWidth +
'px').show();
modalContent.top(mdcTop + 'px').left(mdcLeft + 'px').show();
});
$('#modalContent .focus').focus();
};
/**
* jQuery function init
*/
jQuery.fn.modalContent = function(css, animation, speed)
{
// If our animation isn't set, make it just show/pop
if (!animation) { var animation = 'show'; } else {
// If our animation isn't "fade" then it always is show
if ( ( animation != 'fade' ) && ( animation != 'slide') ) animation =
'show';
}
if ( !speed ) var speed = 'fast';
// Build our base attributes and allow them to be overriden
css = jQuery.extend({
position: 'absolute',
left: '0px',
margin: '0px',
background: '#000',
opacity: '.55'
}, css);
// jQuery mojo
this.each(function(){
$(this).hide();
new jQuery.modalContent($(this), css, animation, speed);
});
// return this object
return this;
};
/**
* unmodalContent
* @param animation (fade, slide, show)
* @param speed (valid animation speeds slow, medium, fast or # in ms)
*/
jQuery.fn.unmodalContent = function(animation, speed)
{
// If our animation isn't set, make it just show/pop
if (!animation) { var animation = 'show'; } else {
// If our animation isn't "fade" then it always is show
if ( ( animation != 'fade' ) && ( animation != 'slide') ) animation =
'show';
}
// Set a speed if we dont have one
if ( !speed ) var speed = 'fast';
// Unbind the resize we bound
$(window).unbind('resize');
$('body').unbind( 'focus', modalEventHandler );
$('body').unbind( 'keypress', modalEventHandler );
// jQuery magic loop through the instances and run the animations or
removal.
this.each(function(){
if ( animation == 'fade' ) {
$('#modalContent').fadeOut(speed,function(){$('#modalBackdrop').fadeOut(speed,
function(){$(this).remove();});$(this).remove();});
} else {
if ( animation == 'slide' ) {
$('#modalContent').slideUp(speed,function(){$('#modalBackdrop').slideUp(speed,
function(){$(this).remove();});$(this).remove();});
} else {
$('#modalContent').remove();$('#modalBackdrop').remove();
}
}
});
};
--
View this message in context:
http://www.nabble.com/modalContent-plugin-is-not-modal-tf2829138.html#a7985006
Sent from the jQuery Plugins mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
