6

所以我正在阅读以下文章：使用 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">

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

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

这是我的代码：

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

我在这里做错了什么？

4

2 回答 2

4

您不必更改课程。类的作用是将相同的样式应用于不同的元素，因此保留它就modalDialog可以了。

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

于 2012-12-14T23:22:41.897 回答
0

大约一个小时前，我刚刚解决了这个问题，就在阅读本文之前。如上面的答案所示，我根本没有更改课程。我只是为第二个模态框创建了一个新 ID（带有一些新属性），它工作正常。

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

于 2013-11-03T03:09:21.373 回答