分类导航

HTML5 发布时间：2022-04-26 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html5 – 多个CSS模态框，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_618_0@

所以我正在阅读以下文章： Create Modal window with 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>

< div id = openModal“没有CSS调用
要创建多个模态,我的假设是将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>

我在这做错了什么？