Ringce : In Place Modal

What is it?

In place modal is a jquery UI widget that adds the gray backgrounds that are usually seen with modal popups. While focusing the users onto a particular element, it also keeps them in the context of the page unlike modal popups.

Demo

Click To Focus/UnFocus the list
Click me to expand
Click me to contract

Checkout Ajax Machine Plugins where in-place modal is used as a plugin.

How does it work?

The widget creates and positions four layers(top, right, bottom ,left) so that the current element remains focussed.

Code

Actions

inplaceModal: Creates the modal and shows it during the first call.

show: Displays the overlay by figuring out the dimensions of the target element.

hide: Hides the overlays without removing them from the DOM.

resizeOverlay: This function can be called to resize/reposition the overlay if the target element changes size/position.

Options

No options for this widget yet. Class overlay is applied to the overlay elements.

Demo Example

$(function(){
  $("#item11").unbind('click').bind('click', function(){
    $("#list1").inplaceModal(); 
    if($("#list1").attr("hasModal") == "true"){
        $("#list1").inplaceModal('hide');
    } else {
        $("#list1").inplaceModal('show');
    }
});
$("#item12").unbind('click').bind('click', function(){
    if($("#list1").attr("hasModal") == "true"){
        $("#list1").height($("#list1").height() + 5);
    }
    $("#list1").inplaceModal('resizeOverlay');
});
$("#item13").unbind('click').bind('click', function(){
    if($("#list1").attr("hasModal") == "true"){
        $("#list1").height($("#list1").height() - 5);
    }
    $("#list1").inplaceModal('resizeOverlay');
});
});

Known Issues

The target element must have an id property.

Backlog

Allow options
Follow jQuery UI guidelines for styles and elements.
Effects