Multiple CSS Modal boxes(多个 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/
这篇关于多个 CSS 模态框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:多个 CSS 模态框
基础教程推荐
- Chart.js 在线性图表上拖动点 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 直接将值设置为滑块 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01