title: Modal PDF IFRAME with Jquery
body: <p>So here is my script, works perfectly, no problems. Now why am I posting this on here, mostly so I can enhance it and make it better also i figure this could come to help others!
  JQUERY! Here is a working sample <a href="http://jsfiddle.net/cornelas/4eUgf/2/" rel="nofollow">http://jsfiddle.net/cornelas/4eUgf/2/</a></p>
  
  <pre><code>    $(document).ready(function() {
          $('.select').click(function () {
          $('.pdf_grey').fadeIn('slow');
          $('.select').hide();
          $('.deselect').show();
     });
       $('.deselect').click(function() {
          $('.pdf_grey').fadeOut('slow');
          $('.select').show();
          $('.deselect').hide();
      });
          $('.pdf_grey').css({'opacity' : 0.8});
      });
      $(document).mouseup(function (e)
  {
      var container = $(".pdf_grey");
  var deselect = $(".deselect");
  var select = $(".select");
  
      if (container.has(e.target).length === 0)
      {
          container.hide();
         deselect.hide();
         select.show();
      }
  });
  </code></pre>
  
  <p>And here is my HTML
        
        
        <h3>Site Manual</h3>PreviewMinimize | Download
      </p>
  
  <pre><code>&lt;div class="pdf_grey"&gt;
  &lt;span class="deselect top_inf"&gt;&lt;h3&gt;Close&lt;h3&gt;&lt;/span&gt;&lt;br&gt;
  &lt;iframe id="manual" style="border:1px solid #666CCC" title=" Manual" src="Images/pdf/UserMaual.pdf" frameborder="1" scrolling="auto" height="600" width="850" &gt;&lt;/iframe&gt;
  &lt;/div&gt;
  &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>AND CSS finally</p>
  
  <pre><code>.pdf_grey {
  position: absolute;
  left: 500px;
  top: 100px;
  display: none;
  padding: 25px;
  background: #333;
  }
  .deselect {
      display: none;
      cursor: pointer;
  }
  .select {
      cursor: pointer;
      color: #666;
  
  }
  .select:hover {
      color: red;
  
  }
  </code></pre>
  
  <p>If you notice I wrote this script that it would specifically target class PDF grey and that it would reveal the class which is set to hidden, the div contains a Iframe which loads the PDF. I thought this was a really simple cool way to load a pdf without changing the page. Now.. Million dolla question, how do I make this so that if any has a class of pdf it will load the content it has hidden. I dont want to go crazy on setting up classes as you can see. I figure in the ahref or the something we have to set a class that loads the Iframe. Thanks guys for the help, I will post my script when its complete with anyone who helped name on it, all the modals I have seen are lame and not as responsive.</p>