実現したいこと
ボタン１を押下するとボタン１の内容のモーダル
ボタン２を押下するとボタン２の内容のモーダル
がでるようにしたい
発生している問題・分からないこと
モーダルが２つ出てきてしまう
該当のソースコード
html
1<!DOCTYPE html>2<html lang="en">3 4<head>5 <meta charset="UTF-8">6 <link rel="stylesheet" href="style.css">7 8</head>9 10<body>11 <div id="modal-container">12 <div class="modal-background">13 <div class="modal" id="modal1">14 <p>ボタン１の内容</p>15 </div>16 <div class="modal" id="modal2">17 <p>ボタン２の内容</p>18 </div>19 </div>20 </div>21 22 23 <div class="content">24 25 <div class="buttons">26 <div class="one button" data-target="modal1">ボタン１</div>27 <div class="one button" data-target="modal2">ボタン２</div>28 </div>29 </div>30 31 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>32 33</body>34 35</html>36 37 38<script>39 $('.button').click(function () {40 var buttonId = $(this).attr('class');41 $('#modal-container').removeAttr('class').addClass(buttonId);42 $('body').addClass('modal-active');43 })44 45 $('#modal-container').click(function () {46 $(this).addClass('out');47 $('body').removeClass('modal-active');48 });49</script>
css
1#modal-container {2 position: fixed;3 display: table;4 height: 100%;5 width: 100%;6 top: 0;7 left: 0;8 transform: scale(0);9 z-index: 1;10 11}12 13#modal-container.one {14 transform: scaleY(0.01) scaleX(0);15 animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;16}17 18#modal-container.one .modal-background .modal {19 transform: scale(0);20 animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;21}22 23#modal-container.one.out {24 transform: scale(1);25 animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;26}27 28#modal-container.one.out .modal-background .modal {29 animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;30}31 32#modal-container .modal-background {33 display: table-cell;34 background: rgba(0, 0, 0, 0.8);35 text-align: center;36 vertical-align: middle;37}38 39#modal-container .modal-background .modal {40 background: white;41 padding: 50px;42 display: inline-block;43 border-radius: 3px;44 font-weight: 300;45 position: relative;46}47 48 49.content .buttons {50 max-width: 800px;51 margin: 0 auto;52 padding: 0;53 text-align: center;54}55 56.content .buttons .button {57 display: inline-block;58 text-align: center;59 padding: 10px 15px;60 margin: 10px;61 background: red;62 font-size: 18px;63 background-color: #efefef;64 border-radius: 3px;65 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);66 cursor: pointer;67}68 69.content .buttons .button:hover {70 color: white;71 background: #009bd5;72}73 74@keyframes unfoldIn {75 0% {76 transform: scaleY(0.005) scaleX(0);77 }78 79 50% {80 transform: scaleY(0.005) scaleX(1);81 }82 83 100% {84 transform: scaleY(1) scaleX(1);85 }86}87 88@keyframes unfoldOut {89 0% {90 transform: scaleY(1) scaleX(1);91 }92 93 50% {94 transform: scaleY(0.005) scaleX(1);95 }96 97 100% {98 transform: scaleY(0.005) scaleX(0);99 }100}101 102@keyframes zoomIn {103 0% {104 transform: scale(0);105 }106 107 100% {108 transform: scale(1);109 }110}111 112@keyframes zoomOut {113 0% {114 transform: scale(1);115 }116 117 100% {118 transform: scale(0);119 }120}
試したこと・調べたこと
上記の詳細・結果
２つモーダルが立ち上がってしまった
補足
特になし
0 コメント