Multiple CSS Modal boxes

Question

So I was reading the following article: Create Modal window with CSS3

However, I'm wanting to modify it by adding more than one modal box to my site.

Here is the code to the original modal:

<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">X</a>
    <h2>Modal Box</h2>
    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
    <p>etc..etc..</p>
</div>

There is no CSS call for the <div id=openModal" To create multiple modals, my assumption would be to change the div to <div id=openModal2" class="modalDialog2">

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.

However, every time I do this, it does not open the modal box.

Here is my code:

<a href="#openModal1">Box 1</a>

<div id="openModal1" class="modalDialog1">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Modal Box 1</h2>
    <p>This is a sample modal box that can be created using the powers of CSS3.    </p>
    <p>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.</p>
</div>
</div>
<a href="#openModal2">Box 2</a>

  <div id="openModal2" class="modalDialog2">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Modal Box 2</h2>
    <p><strong>Box 2</strong></p>
    <p>yadda yadda</p>
</div>

What am I doing wrong here?

Answer 1

you don't have to change the class. The role of classes is to apply the same style to different elements, so keeping it modalDialog will do the job.

Demo: http://jsfiddle.net/3Vykc/