きまぐれアップデート

  1. TOP
  2. CSS
  3. CSSでモーダルウィンドウ（ポップアップ）表示する方法

CSSでモーダルウィンドウ（ポップアップ）表示する方法

目次

お久しぶりです。
また大分期間が空いてしまいました。
最近は仕事が忙しくブログを書く時間が全然ありませんでした。

今回は仕事でポップアップウィンドウを作ることが多かったので忘備録としてCSSでモーダルウィンドウ（ポップアップ）表示する方法を書いていこうと思います。

CSSでモーダルウィンドウ（ポップアップ）表示する方法


まずはHTMLです。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<input type="checkbox" id="popup01" class="popupCheck">      
<div class="wrapper" align="center">
    <div class="button small">
        <label for="popup01">ウィンドウを開く</label>
    </div>
    <div id="popup01Con" class="popupWrap">
        <div class="popupBg">
            <label for="popup01" class="popup_Close"></label>
        </div>
        <div class="popupCon">
            <div class="popupInner">
                <div class="popupButton_Close"><label for="popup01" class="popup_Close">×</label></div>
                <h1 class="Tittle popupTittle">テストページ</h1>
                    <div class="popupText">
                        <p>
                            <a href="リンクする場合のURL"><img src="画像URL.jpg"></a>
                        </p>
                        <p>
                            ポップアップテストです。<br>
                            テストテストテストテストテストテストテストテスト<br>
                            テストテストテストテストテストテストテストテスト<br>
                            テストテストテストテストテストテストテストテスト<br>
                            テストテストテストテストテストテストテストテスト<br>
                            テストテストテストテストテストテストテストテスト<br>
                            テストテストテストテストテストテストテストテスト<br>
                            テストテストテストテストテストテストテストテスト<br>
                            テストテストテストテストテストテストテストテスト<br>
                            テストテストテストテストテストテストテストテスト<br>
                            テストテストテストテストテストテストテストテスト<br>
                            テストテストテストテストテストテストテストテスト<br>
                            テストテストテストテストテストテストテストテスト<br>
                        </p>
                        <div class="button small"><label for="popup01">× ウィンドウを閉じる</label></div>
                    </div>
            </div>
        </div>
    </div>


スポンサードリンク

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
.contents .Tittle {
  margin-bottom: 0.5em;
  padding-bottom: 0.25em;
  font-size: 2em;
  font-weight: bold;
  line-height: 1.3;
  border-bottom: 1px solid #dedede;
}
.contents p {
  margin-bottom: 1em;
  line-height: 1.7;
}
 
.popupCheck {
  display: none;
}
 
label {
  cursor: pointer;
}
 
.button {
  text-align: center;
}
.button label {
  display: inline-block;
  padding: 0.8em 4.0em;
  margin: 2.0em;
  color: #FFFFFF;
  font-size: 20px;
  background-color: #29304b;
  text-decoration: none;
  border-radius: 5px;
  -webkit-transition: 0.3s cubic-bezier(1, 0, 0, 1);
  transition: 0.3s cubic-bezier(1, 0, 0, 1);
  -webkit-transition-property: background-color, -webkit-box-shadow;
  transition-property: background-color, -webkit-box-shadow;
  transition-property: background-color, box-shadow;
  transition-property: background-color, box-shadow, -webkit-box-shadow;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
}
.button label:hover {
  color: #FFFFFF;
  background-color: #404b75;
  -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.3);
}
 
.popupWrap, .popupBg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  z-index: 10;
}
 
.popupWrap {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s cubic-bezier(1, 0, 0, 1);
  transition: 0.3s cubic-bezier(1, 0, 0, 1);
  -webkit-transition-property: opacity;
  transition-property: opacity;
  will-change: opacity;
}
 
.popupBg {
  cursor: pointer;
  opacity: 0.7;
  background-color: #000;
  z-index: 2;
}
.popupBg label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
}
 
.popupCon {
  position: absolute;
  top: 5%;
  left: 0;
  right: 0;
  width: 92%;
  max-width: 640px;
  height: 86%;
  margin: auto;
  z-index: 3;
}
 
.popupInner {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  height: 100%;
  padding: 0 1.5em 1.5em;
  cursor: default;
  background-color: #fff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
}
 
.popupButton_Close {
  position: absolute;
  top: 0;
  right: 0;
}
.popupButton_Close label {
  display: inline-block;
  padding: 0.5em;
  color: #333;
  text-decoration: none;
  font-size: 2em;
}
 
.popupCheck:not(:checked) ~ .wrapper > *:not(.popupWrap) {
  -webkit-filter: blur(0px);
          filter: blur(0px);
}
.popupCheck:not(:checked) ~ .wrapper .popupWrap {
  opacity: 0;
  visibility: hidden;
}
 
.popupCheck:checked ~ .wrapper > *:not(.popupWrap) {
  -webkit-filter: blur(3px);
          filter: blur(3px);
}
 
 
 
#popup01:checked ~ .wrapper #popup01Con {
  opacity: 1;
  visibility: visible;
}
 
 
 
.popupTittle {
  padding: 2em 0.5em 1.5em;
  font-size: 2em;
  line-height: 1.3;
  text-align: center;
  color:#000;
}
 
.popupText .popupCover {
  margin: 0 -1.5em 1em;
}
.popupText p {
  margin-bottom: 1em;
  line-height: 1.7;
  color:#000;
}

結果

テストページ

ポップアップテストです。
テストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテスト


このような感じです。
画像だけにしてバナーとしての広告表示につかったり、テキストだけとか色々変更して作ってみるといいと思います。

スポンサードリンク


コメントを書き込む

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

CAPTCHA