ページバック時に、一度開いたモーダルウィンドウが開いてしまう。

問題ページ

モーダルウィンドウを複数設置したページ

現状

ページバック時に、一度開いたモーダルウィンドウがもう一度表示されてしまう

理想

ページバックすると、前のページに戻る

コード

html
1<div class="slider_style">
2<div><a href="#modal-1">１つめのボタン</a></div>
3<div><a href="#modal-2">２つめのボタン</a></div>
4<div><a href="#modal-3">３つめのボタン</a></div>
5・
6・
7・
8</div>
9
10<!-----モーダル------->
11<div class="modal-wrapper" id="modal-1">
12<a href="#!" class="modal-overlay"></a>
13<div class="modal-window">
14１つめの内容
15</div>
16<a href="#!" class="modal-close">×</a>
17</div>
18
19<div class="modal-wrapper" id="modal-2">
20<a href="#!" class="modal-overlay"></a>
21<div class="modal-window">
22２つめの内容
23</div>
24<a href="#!" class="modal-close">×</a>
25</div>
26
27<div class="modal-wrapper" id="modal-3">
28<a href="#!" class="modal-overlay"></a>
29<div class="modal-window">
30３つめの内容
31</div>
32<a href="#!" class="modal-close">×</a>
33</div>
34

CSS
1.modal-wrapper {
2    z-index: 999;
3    position: fixed;
4    top: 0;
5    right: 0;
6    bottom: 0;
7    left: 0;
8    padding: 60px 10px;
9    text-align: center
10}
11
12.modal-wrapper:not(:target) {
13    opacity: 0;
14    visibility: hidden;
15    transition: opacity .3s, visibility .3s;
16}
17
18.modal-wrapper:target {
19    opacity: 1;
20    visibility: visible;
21    transition: opacity .4s, visibility .4s;
22}
23
24.modal-wrapper::after {
25    display: inline-block;
26    height: 100%;
27    margin-left: -.05em;
28    vertical-align: middle;
29    content: ""
30}
31
32.modal-wrapper .modal-window {
33    box-sizing: border-box;
34    display: inline-block;
35    z-index: 20;
36    position: relative;
37    width: 100%;
38    max-width: 600px;
39    padding: 30px 10px 10px;
40    border-radius: 2px;
41    background: #fff;
42    box-shadow: 0 0 30px rgba(0, 0, 0, .6);
43    vertical-align: middle
44}
45
46.modal-wrapper .modal-window .modal-content {
47    max-height: 100vh;
48    overflow-y: auto;
49}
50
51.modal-overlay {
52    z-index: 10;
53    position: absolute;
54    top: 0;
55    right: 0;
56    bottom: 0;
57    left: 0;
58    background: rgba(0, 0, 0, .8)
59}
60
61.modal-wrapper .modal-close {
62    z-index: 20;
63    position: absolute;
64    top: 0;
65    right: 0;
66    width: 35px;
67    color: #000;
68    font-size: 20px;
69    font-weight: 700;
70    line-height: 35px;
71    text-align: center;
72    text-decoration: none;
73    text-indent: 0
74}
75
76.modal-wrapper .modal-close:hover {
77    color: #000;
78}

質問

どこをどう変更すればページバック時にモーダルウィンドウがいちいち開かなくなるのかご教授いただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

現状の方法はaタグのページ内リンクで移動することでモーダルウィンドウを表示しています。
ページ内移動でアドレスが変更されます。（一つ目のボタンならURLの最後に#modal-1が付加される。）

ブラウザの履歴には #modal-1 が追加されたURLが残りますので、ページバックで戻るとモーダルウィンドウが表示されます。

これに対応するにはブラウザの履歴を書き換える必要がありますので、Javascriptは必須になります。
ならば、CSSのみに拘らずに、スクリプトでモーダルウィンドウを表示させるようにすればどうでしょうか。Javascriptでモーダルウィンドウを表示させるサンプルは検索すればいくらでも見つかると思います。

投稿2020/04/01 04:35