【发布时间】：2020-09-02 20:00:40
【问题描述】：
我想要做什么，当我点击一个按钮时它会打开特定的模式，就像我点击 button1 时它会打开 modal1 等等，我怎样才能做到这一点：
HTML：
<div id="modal-container">
<div class="modal-background">
<div class="modal-inners">
<h2>I'm a Modal 11111</h2>
<p>I am text</p>
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
</svg>
</div>
</div>
</div>
<div id="modal-container">
<div class="modal-background">
<div class="modal-inners">
<h2>I'm a Modal 2222</h2>
<p>i am text</p>
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
</svg>
</div>
</div>
</div>
<div id="modal-effect" class="button">One</div>
<div id="modal-effect" class="button">Two</div>
css：
#modal-container {
position: fixed;
display: table;
height: 100%;
width: 100%;
top: 0;
left: 0;
transform: scale(0);
z-index: 1;
}
#modal-container.modal-effect {
transform: scaleY(0.01) scaleX(0);
animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.modal-effect .modal-background .modal-inners {
transform: scale(0);
animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.modal-effect.out {
transform: scale(1);
animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.modal-effect.out .modal-background .modal-inners {
animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container .modal-background {
display: table-cell;
background: rgba(0, 0, 0, 0.8);
text-align: center;
vertical-align: middle;
}
#modal-container .modal-background .modal-inners {
background: white;
padding: 50px;
display: inline-block;
border-radius: 3px;
font-weight: 300;
position: relative;
}
#modal-container .modal-background .modal-inners .modal-svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 3px;
}
.buttons {
max-width: 800px;
margin: 0 auto;
padding: 0;
text-align: center;
}
.button {
display: inline-block;
text-align: center;
padding: 10px 15px;
margin: 10px;
background: red;
font-size: 18px;
background-color: #efefef;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.button:hover {
color: white;
background: #009bd5;
}
@keyframes unfoldIn {
0% {
transform: scaleY(0.005) scaleX(0);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(1) scaleX(1);
}
}
@keyframes unfoldOut {
0% {
transform: scaleY(1) scaleX(1);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(0.005) scaleX(0);
}
}
@keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes zoomOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
jquery：
$('.button').click(function(){
var buttonId = $(this).attr('id');
$('#modal-container').removeAttr('class').addClass(buttonId);
$('body').addClass('modal-active');
})
$('#modal-container').click(function(){
$(this).addClass('out');
$('body').removeClass('modal-active');
});
编辑：这是完整的工作模式，我想指定单击哪个按钮和模式以使其打开。
我想要做什么我想添加类似 modal-numbers 属性，当我点击一个按钮时，它会打开特定的模式弹出窗口。
【问题讨论】：
-
你能添加css吗？
-
抱歉来晚了，css添加了完整的模态
标签： javascript html jquery