diff --git a/README.md b/README.md index d30e055..72cca15 100644 --- a/README.md +++ b/README.md @@ -180,6 +180,8 @@ and make your AJAX request in the link's click handler. Note that you need to ma return false; }); +Note that the AJAX response must be wrapped in a div with class modal when using the second (manual) method. + # Contributing I would love help improving this plugin, particularly with: diff --git a/examples/ajax2.html b/examples/ajax2.html new file mode 100644 index 0000000..37afb96 --- /dev/null +++ b/examples/ajax2.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/examples/index.html b/examples/index.html index 6af6e7a..eb6b02e 100644 --- a/examples/index.html +++ b/examples/index.html @@ -143,7 +143,24 @@

Example 3: resizing


Example 4: AJAX

-

This example loads HTML with AJAX.

+ +

This first example uses rel="modal:open" to automatically load the page contents into a modal via AJAX:

+ +
<a href="ajax.html" rel="modal:open">example</a>
+ +

This second example shows how you can manually load AJAX pages into a modal. Note that the AJAX response must be wrapped in a div with class modal:

+ +
<!-- Normal link -->
<a href="ajax.html" id="manual-ajax">second example</a>
+ +
// Open modal in AJAX callback
+$('#manual-ajax').click(function(event) {
+  event.preventDefault();
+  $.get(this.href, function(html) {
+    $(html).appendTo('body').modal();
+  });
+});
+ +
<!-- AJAX response must be wrapped in the modal's root class. -->
<div class="modal">
<p>Second AJAX Example!</p>
</div>

If you want more spinner styles, check out ajaxload.info.

@@ -188,6 +205,13 @@

Example 5: the un-closable window

return false; }); + $('#manual-ajax').click(function(event) { + event.preventDefault(); + $.get(this.href, function(html) { + $(html).appendTo('body').modal(); + }); + }); + $('a[href="#ex5"]').click(function(event) { event.preventDefault(); $(this).modal({