多个CSS模态框 [英] Multiple CSS Modal boxes

问题描述

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

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>

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

样式仅在modalDialog框上，所以对于第二个模态，我会假设我我也改变了这个类名。

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.

这是我的代码：

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

我在这里做错了什么？

推荐答案

您无需更改课程。类的作用是将相同的样式应用于不同的元素，因此保持它 modalDialog 将完成这项工作。

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.

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

这篇关于多个CSS模态框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！