title: Modal suggestion/tips for an AJAX submit
body: <p>This isn't as much a code question as I'm hoping someone can point me in the right direction.  </p>
  
  <p>I have a submit which currently pops up an animated gif on submit of the page (the write to the database takes a few seconds and so I use this to let the user know the site isn't frozen).  What I'd like though is for that animated gif to pop up in a modal so that I can skin a bit... (I need an approximately 200px high modal box with 100% width, with the animated gif centered in the box). </p>
  
  <p>I've tried a few modal scripts with no luck.  <strong>Anyone have any experience or luck with the ability to basically custom skin a modal box and have an animated gif pop up over it?</strong>  </p>
  
  <p>Here's what I'm using now for code, and while it's not a modal, it is working in that it will pop up the animated gif when the user clicks the submit button.  But I need to dim the background and skin the foreground, so a modal I think is where I need to go with this... </p>
  
  <pre><code>&lt;!-- SPINNER CODE BEGIN --&gt;
  
  &lt;div id="spinner" class="spinner" style="display:none;"&gt;
  &lt;img id="img-spinner" src="_assets/img/spin_lg.gif" alt="Loading"/&gt;
  &lt;/div&gt;
  
  
  &lt;style type="text/css"&gt;
  .spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -100px; /* half width of the spinner gif */
  margin-top: -100px; /* half height of the spinner gif */
  text-align:center;
  z-index:1234;
  overflow: hidden;
  width: 200px; /* width of the spinner gif */
  height: 202px; /*hight of the spinner gif +2px to fix IE8 issue */
  }
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  $('#proceedForm').click(function() {
      $('#spinner').show();
  });
  });
  &lt;/script&gt;
  
  
  
  &lt;!-- SPINNER CODE END --&gt;
  </code></pre>