Skip to content

Commit

Permalink
updated README
Browse files Browse the repository at this point in the history
  • Loading branch information
christiannaths committed Oct 28, 2012
1 parent d9145ff commit eab14ef
Showing 1 changed file with 19 additions and 18 deletions.
37 changes: 19 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ Include [jQuery](http:https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js) an

<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.modal.min.js" type="text/javascript" charset="utf-8"></script>

Include the `jquery.modal.css` stylesheet:

<link rel="stylesheet" href="jquery.modal.css" type="text/css" media="screen" />

As of version 0.3.0, jQuery 1.7 is required. If you're using an earlier version of jQuery you can use the [v.0.2.5 tag.](https://github.com/kylefox/jquery-modal/tags)

# Opening
Expand Down Expand Up @@ -57,11 +57,11 @@ An even simpler way is to add `rel="modal:open"` to links. When the link is cli
Open an existing DOM element:

<a href="#login-form" rel="modal:open">Login</a>

Load a remote URL with AJAX:

<a href="login.html" rel="modal:open">Login</a>

You should apply a width to all your modal elements using normal CSS.

#login-form.modal { width: 400px; }
Expand All @@ -73,23 +73,23 @@ The modal doesn't have a fixed height, and thus will expand & contract verticall
Because there can be only one modal active at a single time, there's no need to select which modal to close:

$.modal.close();

_TODO: this should be changed so that when called on a specific element, the element is returned (normal jQuery fashion)._

Similar to how links can be automatically bound to open modals, they can be bound to close modals using `rel="modal:close"`:

<a href="#close" rel="modal:close">Close window</a>

_(Note that modals loaded with AJAX are removed from the DOM when closed)._

# Resizing

There's really no need to manually resize modals, since the default styles don't specify a fixed height; modals will expand vertically (like a normal HTML element) to fit their contents.

However, when this occurs, you will probably want to at least re-center the modal in the viewport:

$.modal.resize()

# Options

These are the supported options and their default values:
Expand All @@ -101,12 +101,13 @@ These are the supported options and their default values:
escapeClose: true, // Allows the user to close the modal by pressing `ESC`
clickClose: true, // Allows the user to close the modal by clicking the overlay
closeText: 'Close', // Text content for the close <a> tag.
closeClass: '', // Add additional class(es) to the close <a> tag.
showClose: true, // Shows a (X) icon/link in the top-right corner
modalClass: "modal", // CSS class added to the element being displayed in the modal.
spinnerHtml: null, // HTML appended to the default spinner during AJAX requests.
showSpinner: true // Enable/disable the default spinner during AJAX requests.
};

# Events

The following events are triggered on the modal element at various points in the open/close cycle (see below for AJAX events). Hopefully the names are self-explanatory.
Expand All @@ -117,7 +118,7 @@ The following events are triggered on the modal element at various points in the
$.modal.OPEN = 'modal:open';
$.modal.BEFORE_CLOSE = 'modal:before-close';
$.modal.CLOSE = 'modal:close';

The first and only argument passed to these event handlers is the `modal` object, which has three properties:

modal.elm; // Original jQuery object upon which modal() was invoked.
Expand Down Expand Up @@ -162,21 +163,21 @@ and make your AJAX request in the link's click handler. Note that you need to ma
$('a[rel="ajax:modal"]').click(function(event) {

$.ajax({

url: $(this).attr('href'),

success: function(newHTML, textStatus, jqXHR) {
$(newHTML).appendTo('body').modal();
$(newHTML).appendTo('body').modal();
},

error: function(jqXHR, textStatus, errorThrown) {
// Handle AJAX errors
}

// More AJAX customization goes here.

});

return false;
});

Expand Down Expand Up @@ -213,4 +214,4 @@ jQuery Modal is distributed under the [MIT License](Learn more at http:https://opensou
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

0 comments on commit eab14ef

Please sign in to comment.