Multiple CSS Modal boxes

╄→尐↘猪︶ㄣ 提交于 2019-12-05 00:20:33


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">
        <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>

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">
    <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>
<a href="#openModal2">Box 2</a>

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

What am I doing wrong here?


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.



I just solved this problem about an hour ago, right before reading this article. I didn't change the class at all, as indicated in the answer above. I simply created a new ID (with some new properties) for the second modal box and it worked fine.

This said, I ran into this article because I'm having a problem with overflow: scroll/auto only in Chrome with some iframed (yuck, but I have no choice, it comes from a third-party credit card vendor I have to use on this project) content for the modal box. Now if anyone has a solution for this one... :)