Html 多个 CSS 模态框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13887496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple CSS Modal boxes
提问by Roadrnr
So I was reading the following article:Create Modal window with CSS3
所以我正在阅读以下文章：使用 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">
没有 CSS 调用<div id=openModal"要创建多个模态，我的假设是将 div 更改为<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.
样式仅在 modalDialog 框上，因此对于第二个模态，我假设我也会为此更改类名。
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?
我在这里做错了什么？
采纳答案by Sotiris
you don't have to change the class. The role of classes is to apply the same style to different elements, so keeping it modalDialogwill do the job.
你不必改变班级。类的作用是将相同的样式应用于不同的元素，因此保留它就modalDialog可以了。
回答by Stephen Gordon
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.
大约一个小时前，就在阅读本文之前，我刚刚解决了这个问题。如上面的答案所示，我根本没有更改课程。我只是为第二个模态框创建了一个新 ID（带有一些新属性），并且运行良好。
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... :)
这就是说，我遇到了这篇文章，因为我遇到了溢出问题：scroll/auto only in Chrome with some iframed（哎呀，但我别无选择，它来自我必须使用的第三方信用卡供应商在这个项目中）模式框的内容。现在，如果有人对此有解决方案... :)
