多个 CSS 模态框

所以我正在阅读以下文章: 创建模态带有 CSS3 的窗口

但是，我想通过向我的网站添加多个模式框来修改它.

这是原始模态的代码:

<a href="#openModal">打开模态</a><div id="openModal" class="modalDialog">
<a href="#close" title="关闭" class="close">X</a><h2>模态框</h2><p>这是一个示例模态框，可以使用 CSS3 的强大功能创建.</p><p>等等..等等..</p></div>

<div id=openModal" 没有 CSS 调用要创建多个模式，我的假设是将 div 更改为 <div id=openModal2" class="modalDialog2">

样式仅在模态对话框上，所以对于第二个模态，我假设我也会更改类名.

但是，每次我这样做时，它都不会打开模态框.

这是我的代码:

<a href="#openModal1">框 1</a><div id="openModal1" class="modalDialog1">
<a href="#close" title="关闭" class="close">X</a><h2>模态框 1</h2><p>这是一个示例模态框，可以使用 CSS3 的强大功能创建.</p><p>您可以在这里做很多事情，例如在您的网站加载时显示弹出广告，或者为用户创建登录/注册表单.</p></div></div><a href="#openModal2">框 2</a><div id="openModal2" class="modalDialog2">
<a href="#close" title="关闭" class="close">X</a><h2>模态框 2</h2><p><strong>方框 2</strong></p><p>yadda yadda</p></div>

我在这里做错了什么?

解决方案

您不必更改类.类的作用是将相同的样式应用到不同的元素，所以保持它 modalDialog 就可以了.

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

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?

解决方案

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/