title: Multiple CSS Modal boxes
body: <p>So I was reading the following article:<a href="http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/"> Create Modal window with CSS3 </a></p>
  
  <p>However, I'm wanting to modify it by adding more than one modal box to my site.</p>
  
  <p>Here is the code to the original modal:</p>
  
  <pre><code>&lt;a href="#openModal"&gt;Open Modal&lt;/a&gt;
  
  &lt;div id="openModal" class="modalDialog"&gt;
      &lt;div&gt;
          &lt;a href="#close" title="Close" class="close"&gt;X&lt;/a&gt;
      &lt;h2&gt;Modal Box&lt;/h2&gt;
      &lt;p&gt;This is a sample modal box that can be created using the powers of CSS3.&lt;/p&gt;
      &lt;p&gt;etc..etc..&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>There is no CSS call for the <code>&lt;div id=openModal"</code>
  To create multiple modals, my assumption would be to change the div to <code>&lt;div id=openModal2" class="modalDialog2"&gt;</code></p>
  
  <p>The styling is only on the modalDialog box, So for a second modal, I would assume I'd change the class name for that too.</p>
  
  <p>However, every time I do this, it does not open the modal box.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;a href="#openModal1"&gt;Box 1&lt;/a&gt;
  
  &lt;div id="openModal1" class="modalDialog1"&gt;
  &lt;div&gt;
      &lt;a href="#close" title="Close" class="close"&gt;X&lt;/a&gt;
      &lt;h2&gt;Modal Box 1&lt;/h2&gt;
      &lt;p&gt;This is a sample modal box that can be created using the powers of CSS3.    &lt;/p&gt;
      &lt;p&gt;You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;a href="#openModal2"&gt;Box 2&lt;/a&gt;
  
    &lt;div id="openModal2" class="modalDialog2"&gt;
  &lt;div&gt;
      &lt;a href="#close" title="Close" class="close"&gt;X&lt;/a&gt;
      &lt;h2&gt;Modal Box 2&lt;/h2&gt;
      &lt;p&gt;&lt;strong&gt;Box 2&lt;/strong&gt;&lt;/p&gt;
      &lt;p&gt;yadda yadda&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>What am I doing wrong here?</p>