多模态的CSS盒子(Multiple CSS Modal boxes)

所以，我读了下面的文章： 创建CSS3模态窗口

不过，我想通过添加多个模式对话框到我的网站进行修改。

下面是代码到原来的模式：

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

没有CSS呼吁<div id=openModal"要创建多个模态，我的假设是改变的div来<div id=openModal2" class="modalDialog2">

该造型是只在modalDialog盒，因此，对于第二个模式，我会承担我该改变的类名了。

然而，每次我这样做的时候，它不会打开的模式对话框。

这里是我的代码：

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

我在做什么错在这里？

Answer 1:

您不必更改类。 类的作用是相同的样式应用到不同的元素，所以保持它modalDialog将做的工作。

演示： http://jsfiddle.net/3Vykc/

Answer 2:

我只是解决了这个问题，大约一个小时前，右在阅读本文之前。 我一点都没有改变类，如上面的答复中指出。 我只是创造了第二个模式对话框一个新的ID（有一些新的属性），它工作得很好。

这就是说，我遇到了这篇文章，因为我在与溢出的问题：一些的iframe（难吃的滚动/自动仅适用于Chrome，但我别无选择，它来自第三方信用卡供应商我必须使用对模态对话框这个项目）的内容。 现在，如果任何人有这一个解决方案... :)

文章来源: Multiple CSS Modal boxes