Added some AJAX spinners.

README.md

@@ -139,14 +139,20 @@ The following additional events are triggered for AJAX modals:
 
 The `AJAX_BEFORE_SEND` handler receives no arguments. The `AJAX_SUCCESS` handler receives a single argument, which is the HTML returned by the server. These handlers do not receive the modal object as a parameter because it does not exist until _after_ `AJAX_SUCCESS` is fired.
 
-You can use this functionality to show & hide visual feedback:
+You can use this functionality to show & hide visual feedback. jquery-modal comes with a couple basic spinner widgets.
+
+Add the spinner to your markup:
+
+ <div class="modal-spinner"></div>
+
+Bind to AJAX events to show/hide:
 
  $(document).on($.modal.AJAX_BEFORE_SEND, function() {
-  $('#ajax-spinner').show();
+  $('.modal-spinner').show();
  });
 
  $(document).on($.modal.AJAX_SUCCESS, function() {
-  $('#ajax-spinner').hide();
+  $('.modal-spinner').hide();
  });
 
 ## More advanced AJAX handling

examples/index.html

@@ -19,7 +19,9 @@
  p code, li code {background:#ffffcc; color: #444;}
  pre { font-size: 12px; line-height: 18px; }
  hr { height: 10px; background: #eee; border: none; }
-
+ table {width:100%;border-collapse:collapse;}
+ td { border: 1px solid #eee; padding: 15px; }
+ td pre { margin: 0; }
 
  /* Example 2 (login form) */
  .login_form.modal {
@@ -143,6 +145,47 @@ <h2>Example 3: resizing</h2>
 <h2>Example 4: AJAX</h2>
 <p>This <a href="ajax.html" rel="modal:open">example</a> loads HTML with AJAX.</p>
 
+<p>If you want to show a spinner for immediate feedback, just add it to your markup:</p>
+
+<pre><code>&lt;div class="modal-spinner"&gt;&lt;/div&gt;</div></pre></code>
+
+<p>and use the AJAX events to show/hide it</p>
+
+<pre><code>$(document).on($.modal.AJAX_BEFORE_SEND, function() {
+ $('.modal-spinner').show();
+});
+
+$(document).on($.modal.AJAX_SUCCESS, function() {
+ $('.modal-spinner').hide();
+});
+</pre></code>
+
+<p>The <code>modal.css</code> file includes three basic styles. Apply the styles by adding the appropriate class names:</p>
+
+<table>
+ <tr>
+ <td><a href="#default-spinner" rel="spinner">Spinner #1</a></td>
+ <td><pre><code>&lt;div class="modal-spinner"&gt;&lt;/div&gt;</div></pre></code></td> 
+ </tr>
+
+ <tr>
+ <td><a href="#alt-spinner-1" rel="spinner">Spinner #2</a></td>
+ <td><pre><code>&lt;div class="modal-spinner alt1"&gt;&lt;/div&gt;</div></pre></code></td> 
+ </tr>
+
+ <tr>
+ <td><a href="#alt-spinner-2" rel="spinner">Spinner #3</a></td>
+ <td><pre><code>&lt;div class="modal-spinner alt2"&gt;&lt;/div&gt;</div></pre></code></td> 
+ </tr>
+
+</table>
+
+<div id="default-spinner" class="modal-spinner"></div>
+<div id="alt-spinner-1" class="modal-spinner alt1"></div>
+<div id="alt-spinner-2" class="modal-spinner alt2"></div>
+
+<p>If you want more spinner styles, check out <a href="https://ajaxload.info/">ajaxload.info</a>.</p> 
+
 <hr />
 
 <h2>Example 5: the un-closable window</h2>
@@ -164,6 +207,15 @@ <h2>Example 5: the un-closable window</h2>
 <script type="text/javascript" charset="utf-8">
  $(function() {
 
+ $('a[rel="spinner"]').on('click', function() {
+ var spinner = $($(this).attr('href'));
+ spinner.show();
+ setTimeout(function() {
+ spinner.fadeOut();
+ }, 1500);
+ return false;
+ });
+
  function log_modal_event(event, modal) {
  if(typeof console != 'undefined' && console.log) console.log("[event] " + event.type);
  };
@@ -178,11 +230,11 @@ <h2>Example 5: the un-closable window</h2>
  $(document).on($.modal.AJAX_SUCCESS, log_modal_event);
 
  $(document).on($.modal.AJAX_BEFORE_SEND, function() {
- $('#ajax-spinner').show();
+ $('#default-spinner').show();
  });
 
  $(document).on($.modal.AJAX_SUCCESS, function() {
- $('#ajax-spinner').hide();
+ $('#default-spinner').hide();
  });
 
  $('#more').click(function() {

jquery.modal.css

@@ -5,9 +5,13 @@
  padding: 15px 30px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
+ -o-border-radius: 8px;
+ -ms-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 0 10px #000;
  -moz-box-shadow: 0 0 10px #000;
+ -o-box-shadow: 0 0 10px #000;
+ -ms-box-shadow: 0 0 10px #000;
  box-shadow: 0 0 10px #000;
 }
 
@@ -20,4 +24,29 @@
  height: 30px;
  text-indent: -9999px;
  background: url(close.png) no-repeat 0 0;
+}
+
+.modal-spinner {
+ display: none;
+ width: 64px;
+ height: 64px;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ margin-right: -32px;
+ margin-top: -32px;
+ background: url(spinner.gif) #111 no-repeat center center;
+ -webkit-border-radius: 8px;
+ -moz-border-radius: 8px;
+ -o-border-radius: 8px;
+ -ms-border-radius: 8px;
+ border-radius: 8px;
+}
+
+.modal-spinner.alt1 {
+ background-image: url(spinner1.gif);
+}
+
+.modal-spinner.alt2 {
+ background-image: url(spinner2.gif);
 }