以下、お教えして頂き、修正した後のHTMLファイルとCSSファイルの内容を記載します。
HTML
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="shift_jis">
5 <title>Modal Test</title>
6 <link rel="stylesheet" href="micromodal.css">
7
8 </head>
9
10 <body>
11 <div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
12 <div class="modal__overlay" tabindex="-1" data-micromodal-close>
13 <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
14 <header class="modal__header">
15 <h2 class="modal__title" id="modal-1-title">
16 Micromodal
17 </h2>
18 <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
19 </header>
20 <main class="modal__content" id="modal-1-content">
21 <p>
22 Try hitting the <code>tab</code> key and notice how the focus stays within the modal itself. Also, <code>esc</code> to close modal.
23 </p>
24 </main>
25 <footer class="modal__footer">
26 <button class="modal__btn modal__btn-primary">Continue</button>
27 <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
28 </footer>
29 </div>
30 </div>
31 </div>
32
33 <!-- 開くボタン -->
34 <button data-micromodal-trigger="modal-1">open</button>
35
36 <script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
37 <script>
38 MicroModal.init();
39 </script>
40 </body>
41
42</html>
CSS
1/**************************\
2 Basic Modal Styles
3**************************/
4
5.modal {
6 font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
7}
8
9.modal__overlay {
10 position: fixed;
11 top: 0;
12 left: 0;
13 right: 0;
14 bottom: 0;
15 background: rgba(0,0,0,0.6);
16 display: flex;
17 justify-content: center;
18 align-items: center;
19}
20
21.modal__container {
22 background-color: #fff;
23 padding: 30px;
24 max-width: 500px;
25 max-height: 100vh;
26 border-radius: 4px;
27 overflow-y: auto;
28 box-sizing: border-box;
29}
30
31.modal__header {
32 display: flex;
33 justify-content: space-between;
34 align-items: center;
35}
36
37.modal__title {
38 margin-top: 0;
39 margin-bottom: 0;
40 font-weight: 600;
41 font-size: 1.25rem;
42 line-height: 1.25;
43 color: #00449e;
44 box-sizing: border-box;
45}
46
47.modal__close {
48 background: transparent;
49 border: 0;
50}
51
52.modal__header .modal__close:before { content: "\2715"; }
53
54.modal__content {
55 margin-top: 2rem;
56 margin-bottom: 2rem;
57 line-height: 1.5;
58 color: rgba(0,0,0,.8);
59}
60
61.modal__btn {
62 font-size: .875rem;
63 padding-left: 1rem;
64 padding-right: 1rem;
65 padding-top: .5rem;
66 padding-bottom: .5rem;
67 background-color: #e6e6e6;
68 color: rgba(0,0,0,.8);
69 border-radius: .25rem;
70 border-style: none;
71 border-width: 0;
72 cursor: pointer;
73 -webkit-appearance: button;
74 text-transform: none;
75 overflow: visible;
76 line-height: 1.15;
77 margin: 0;
78 will-change: transform;
79 -moz-osx-font-smoothing: grayscale;
80 -webkit-backface-visibility: hidden;
81 backface-visibility: hidden;
82 -webkit-transform: translateZ(0);
83 transform: translateZ(0);
84 transition: -webkit-transform .25s ease-out;
85 transition: transform .25s ease-out;
86 transition: transform .25s ease-out,-webkit-transform .25s ease-out;
87}
88
89.modal__btn:focus, .modal__btn:hover {
90 -webkit-transform: scale(1.05);
91 transform: scale(1.05);
92}
93
94.modal__btn-primary {
95 background-color: #00449e;
96 color: #fff;
97}
98
99
100
101/**************************\
102 Demo Animation Style
103**************************/
104@keyframes mmfadeIn {
105 from { opacity: 0; }
106 to { opacity: 1; }
107}
108
109@keyframes mmfadeOut {
110 from { opacity: 1; }
111 to { opacity: 0; }
112}
113
114@keyframes mmslideIn {
115 from { transform: translateY(15%); }
116 to { transform: translateY(0); }
117}
118
119@keyframes mmslideOut {
120 from { transform: translateY(0); }
121 to { transform: translateY(-10%); }
122}
123
124.micromodal-slide {
125 display: none;
126}
127
128.micromodal-slide.is-open {
129 display: block;
130}
131
132.micromodal-slide[aria-hidden="false"] .modal__overlay {
133 animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
134}
135
136.micromodal-slide[aria-hidden="false"] .modal__container {
137 animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
138}
139
140.micromodal-slide[aria-hidden="true"] .modal__overlay {
141 animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
142}
143
144.micromodal-slide[aria-hidden="true"] .modal__container {
145 animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
146}
147
148.micromodal-slide .modal__container,
149.micromodal-slide .modal__overlay {
150 will-change: transform;
151}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。