モーダルを一日一回のみ表示したい

#現在の状況
モーダルウィンドウを表示させるページを作成しています。現在時刻が設定時間を過ぎている場合は「設定時間を過ぎています」、現在時刻よりも後の場合は、「～時に設定されています」と表示させています。
※設定時刻に自動でモーダルウィンドウを表示させたいわけではありません

#実現したいこと
このモーダルウィンドウを、「その日初めてアクセスしたときのみ」表示させたいと考えています。「設定」リンクを押したときのみウィンドウが表示され、その後更新するとウィンドウが出ないようにしたいのです。また設定した時刻の有効期限は「その日の23時59分まで」にはしないで実現しようと考えています。
※cookieを削除した場合は表示されても問題ありません

以下がコードです。

js
1
2
3<?php
4$checked=["a"=>"","b"=>"","c"=>""];
5$checked[isset($_COOKIE["r"])?$_COOKIE["r"]:"a"]=" checked";
6
7$selected=["0"=>"","1"=>"","2"=>"","3"=>"","4"=>"","5"=>"","6"=>"","7"=>"","8"=>"","9"=>"","10"=>"","11"=>"","12"=>"","13"=>"","14"=>"","15"=>"","16"=>"","17"=>"","18"=>"","19"=>"","20"=>"","21"=>"","22"=>"","23"=>""];
8$selected[isset($_COOKIE["fuga"])?$_COOKIE["fuga"]:"0"]=" selected";
9
10?>
11
12<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
13<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
14
15<script>
16window.addEventListener('DOMContentLoaded', ()=>{
17  document.querySelector('[name=r][checked]').checked=true;
18  document.querySelector('#set').addEventListener('click',e=>{
19    e.preventDefault();
20    var r=document.querySelector('[name=r]:checked');
21    document.cookie="r="+r.value+";max-age=573500000";
22  });
23  document.querySelector('#reload').addEventListener('click',e=>{
24    e.preventDefault();
25    location.reload();
26  });
27});
28</script>
29
30
31<style type="text/css">
32*{
33    box-sizing: border-box;
34    margin: 0;
35    padding: 0;
36}
37.content{
38    margin: 0 auto;
39    padding: 40px;
40}
41.modal{
42    display: none;
43    height: 100vh;
44    position: fixed;
45    top: 0;
46    width: 100%;
47}
48.modal__bg{
49    background: rgba(0,0,0,0.8);
50    height: 100vh;
51    position: absolute;
52    width: 100%;
53}
54.modal__content{
55    background: #fff;
56    left: 50%;
57    padding: 40px;
58    position: absolute;
59    top: 50%;
60    transform: translate(-50%,-50%);
61    width: 60%;
62}
63</style>
64
65<label><input type="radio" value="a" name="r"<?=$checked["a"];?>>a</label>
66<label><input type="radio" value="b" name="r"<?=$checked["b"];?>>b</label>
67<label><input type="radio" value="c" name="r"<?=$checked["c"];?>>c</label><br><br>
68
69<select class="" name="fuga" id="hoge">
70   <option value="0" name="fuga"<?=$selected["0"];?>>0:00</option>
71   <option value="1" name="fuga"<?=$selected["1"];?>>1:00</option>
72   <option value="2" name="fuga"<?=$selected["2"];?>>2:00</option>
73   <option value="3" name="fuga"<?=$selected["3"];?>>3:00</option>
74   <option value="4" name="fuga"<?=$selected["4"];?>>4:00</option>
75   <option value="5" name="fuga"<?=$selected["5"];?>>5:00</option>
76   <option value="6" name="fuga"<?=$selected["6"];?>>6:00</option>
77   <option value="7" name="fuga"<?=$selected["7"];?>>7:00</option>
78   <option value="8" name="fuga"<?=$selected["8"];?>>8:00</option>
79   <option value="9" name="fuga"<?=$selected["9"];?>>9:00</option>
80   <option value="10" name="fuga"<?=$selected["10"];?>>10:00</option>
81   <option value="11" name="fuga"<?=$selected["11"];?>>11:00</option>
82   <option value="12" name="fuga"<?=$selected["12"];?>>12:00</option>
83   <option value="13" name="fuga"<?=$selected["13"];?>>13:00</option>
84   <option value="14" name="fuga"<?=$selected["14"];?>>14:00</option>
85   <option value="15" name="fuga"<?=$selected["15"];?>>15:00</option>
86   <option value="16" name="fuga"<?=$selected["16"];?>>16:00</option>
87   <option value="17" name="fuga"<?=$selected["17"];?>>17:00</option>
88   <option value="18" name="fuga"<?=$selected["18"];?>>18:00</option>
89   <option value="19" name="fuga"<?=$selected["19"];?>>19:00</option>
90   <option value="20" name="fuga"<?=$selected["20"];?>>20:00</option>
91   <option value="21" name="fuga"<?=$selected["21"];?>>21:00</option>
92   <option value="22" name="fuga"<?=$selected["22"];?>>22:00</option>
93   <option value="23" name="fuga"<?=$selected["23"];?>>23:00</option>
94</select><br><br>
95
96<label class="js-modal-open"><a href="#" id="set">設定</a></label><br>
97<a href="#" id="reload">更新</a><br>
98
99 <div class="content">
100     <!-- <a class="js-modal-open" href="">モーダル</a> -->
101 </div>
102 <div class="modal js-modal">
103     <div class="modal__bg js-modal-close"></div>
104     <div class="modal__content">
105         <p>設定しました</p>
106         <a class="js-modal-close" href="">閉じる</a>
107     </div><!--modal__inner-->
108 </div><!--modal-->
109
110</div>
111<div class="modal work-modal">
112    <div class="modal__bg work-modal-close"></div>
113    <div class="modal__content">
114        <p>【<script>
115        var fuga=document.querySelector('select');
116        document.write(fuga.value +"時に")</script>設定されています</p>
117        <a class="work-modal-close" href="">閉じる</a>
118    </div>
119</div>
120
121<div class="modal over-modal">
122    <div class="modal__bg over-modal-close"></div>
123    <div class="modal__content">
124        <p>設定時間を過ぎています</p>
125        <a class="over-modal-close" href="">閉じる</a>
126    </div>
127</div>
128
129<div class="modal thank-modal">
130    <div class="modal__bg thank-modal-close"></div>
131    <div class="modal__content">
132        <p>ログイン成功</p>
133        <a class="thank-modal-close" href="">閉じる</a>
134    </div>
135</div>
136
137<script>
138window.addEventListener('DOMContentLoaded', ()=>{
139  document.querySelector('select').selected=true;
140  document.querySelector('#set').addEventListener('click',e=>{
141    e.preventDefault();
142    var fuga=document.querySelector('select');
143    document.cookie="fuga="+fuga.value+";max-age=573500000";
144  });
145});
146</script>
147
148<script type="text/javascript">
149$(function(){
150      $('.js-modal-open').on('click',function(){
151           $('.js-modal').fadeIn();
152           return false;
153      });
154      $('.js-modal-close').on('click',function(){
155           $('.js-modal').fadeOut();
156           return false;
157      });
158});
159
160$(function(){
161   $('.work-modal-open').on('click',function(){
162        $('.work-modal').fadeIn();
163        return false;
164   });
165   $('.work-modal-close').on('click',function(){
166        $('.work-modal').fadeOut();
167        return false;
168   });
169});
170
171$(function(){
172   $('.over-modal-open').on('click',function(){
173        $('.over-modal').fadeIn();
174        return false;
175   });
176   $('.over-modal-close').on('click',function(){
177        $('.over-modal').fadeOut();
178        return false;
179   });
180});
181
182$(function(){
183   $('.thank-modal-open').on('click',function(){
184        $('.thank-modal').fadeIn();
185        return false;
186   });
187   $('.thank-modal-close').on('click',function(){
188        $('.thank-modal').fadeOut();
189        return false;
190   });
191});
192</script>
193
194<script type="text/javascript">
195   if(document.cookie.indexOf("fuga=") <= 0){
196      $(function(){
197        $('.thank-modal').fadeIn();
198        return false;
199      });
200   }else {
201      $(function(){
202          var login_hour = new Date().getHours();
203          if ((24-login_hour)-(24-fuga.value) >= 0){
204            $(function(){
205                  $('.work-modal').fadeIn();
206                  return false;
207            });
208            }else{
209            $(function(){
210                  $('.over-modal').fadeIn();
211                  return false;
212            });
213            }
214      });
215   }
216</script>
217

#試したこと
日付をまたいだか判定するためのcookieを別で用意し、有効期限を「その日の23時59分59秒」にして、そのcookieがある場合はウィンドウを表示させない、というように出来ないかと考えているのですが、以下のコードだとモーダルウィンドウは繰り返し表示できてしまいました。

js
1
2
3<?php
4
5<!--省略-->
6
7$endTime = strtotime(date("Y/m/d 23:59:59"));
8$nowTime = strtotime(date("Y/m/d H:i:s"));
9$timeDiff = abs($endTime - $nowTime);
10
11setCookie('perDay','1',time()+$timeDiff);
12
13?>
14
15<!--省略-->
16<script type="text/javascript">
17$(function(){
18   if(perDay.value = 1){
19      $('.modal').css("display","none");
20   }else
21   if(document.cookie.indexOf("fuga=") <= 0){
22      $(function(){
23        $('.thank-modal').fadeIn();
24        return false;
25      });
26   }else {
27      $(function(){
28          var login_hour = new Date().getHours();
29          if ((24-login_hour)-(24-fuga.value) >= 0){
30            $(function(){
31                  $('.work-modal').fadeIn();
32                  return false;
33            });
34            }else{
35            $(function(){
36                  $('.over-modal').fadeIn();
37                  return false;
38            });
39            }
40      });
41   }
42});
43</script>

m.ts10806

2019/10/29 07:13

要phpであればタグに追加しておいてください

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

回答2件

別途有効期限が「その日の23時59分59秒まで」のcookieを用意し、モーダルを閉じる毎にcookieを保存、cookieがある場合はモーダルを表示しない、という方法で解決しました。

js
1<?php
2$checked=["a"=>"","b"=>"","c"=>""];
3$checked[isset($_COOKIE["r"])?$_COOKIE["r"]:"a"]=" checked";
4
5$selected=["0"=>"","1"=>"","2"=>"","3"=>"","4"=>"","5"=>"","6"=>"","7"=>"","8"=>"","9"=>"","10"=>"","11"=>"","12"=>"","13"=>"","14"=>"","15"=>"","16"=>"","17"=>"","18"=>"","19"=>"","20"=>"","21"=>"","22"=>"","23"=>""];
6$selected[isset($_COOKIE["fuga"])?$_COOKIE["fuga"]:"0"]=" selected";
7?>
8
9<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
10<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
11
12<style type="text/css">
13*{
14    box-sizing: border-box;
15    margin: 0;
16    padding: 0;
17}
18.content{
19    margin: 0 auto;
20    padding: 40px;
21}
22.modal{
23    display: none;
24    height: 100vh;
25    position: fixed;
26    top: 0;
27    width: 100%;
28}
29.modal__bg{
30    background: rgba(0,0,0,0.8);
31    height: 100vh;
32    position: absolute;
33    width: 100%;
34}
35.modal__content{
36    background: #fff;
37    left: 50%;
38    padding: 40px;
39    position: absolute;
40    top: 50%;
41    transform: translate(-50%,-50%);
42    width: 60%;
43}
44</style>
45
46<label><input type="radio" value="a" name="r"<?=$checked["a"];?>>a</label>
47<label><input type="radio" value="b" name="r"<?=$checked["b"];?>>b</label>
48<label><input type="radio" value="c" name="r"<?=$checked["c"];?>>c</label><br><br>
49
50<select class="" name="fuga" id="hoge">
51   <option value="0" name="fuga"<?=$selected["0"];?>>0:00</option>
52   <option value="1" name="fuga"<?=$selected["1"];?>>1:00</option>
53   <option value="2" name="fuga"<?=$selected["2"];?>>2:00</option>
54   <option value="3" name="fuga"<?=$selected["3"];?>>3:00</option>
55   <option value="4" name="fuga"<?=$selected["4"];?>>4:00</option>
56   <option value="5" name="fuga"<?=$selected["5"];?>>5:00</option>
57   <option value="6" name="fuga"<?=$selected["6"];?>>6:00</option>
58   <option value="7" name="fuga"<?=$selected["7"];?>>7:00</option>
59   <option value="8" name="fuga"<?=$selected["8"];?>>8:00</option>
60   <option value="9" name="fuga"<?=$selected["9"];?>>9:00</option>
61   <option value="10" name="fuga"<?=$selected["10"];?>>10:00</option>
62   <option value="11" name="fuga"<?=$selected["11"];?>>11:00</option>
63   <option value="12" name="fuga"<?=$selected["12"];?>>12:00</option>
64   <option value="13" name="fuga"<?=$selected["13"];?>>13:00</option>
65   <option value="14" name="fuga"<?=$selected["14"];?>>14:00</option>
66   <option value="15" name="fuga"<?=$selected["15"];?>>15:00</option>
67   <option value="16" name="fuga"<?=$selected["16"];?>>16:00</option>
68   <option value="17" name="fuga"<?=$selected["17"];?>>17:00</option>
69   <option value="18" name="fuga"<?=$selected["18"];?>>18:00</option>
70   <option value="19" name="fuga"<?=$selected["19"];?>>19:00</option>
71   <option value="20" name="fuga"<?=$selected["20"];?>>20:00</option>
72   <option value="21" name="fuga"<?=$selected["21"];?>>21:00</option>
73   <option value="22" name="fuga"<?=$selected["22"];?>>22:00</option>
74   <option value="23" name="fuga"<?=$selected["23"];?>>23:00</option>
75</select><br><br>
76<label class="js-modal-open"><a href="#" id="set">設定</a></label><br>
77<a href="#" id="reload">更新</a><br>
78
79<div class="modal js-modal">
80    <div class="modal__bg js-modal-close"></div>
81    <div class="modal__content">
82        <p>設定しました</p>
83        <a class="js-modal-close" href="">閉じる</a>
84    </div>
85</div>
86
87</div>
88<div class="modal work-modal">
89   <div class="modal__bg work-modal-close"></div>
90   <div class="modal__content">
91      <p><script>
92      var fuga=document.querySelector('select');
93      document.write(fuga.value +"時に")</script>設定されています</p>
94      <a class="work-modal-close" href="">閉じる</a>
95   </div>
96</div>
97
98
99<script>
100window.addEventListener('DOMContentLoaded', ()=>{
101  document.querySelector('[name=r][checked]').checked=true;
102  document.querySelector('#set').addEventListener('click',e=>{
103    e.preventDefault();
104    var r=document.querySelector('[name=r]:checked');
105    document.cookie="r="+r.value+";max-age=573500000";
106　});
107});
108//更新ボタン
109window.addEventListener('DOMContentLoaded', ()=>{
110  document.querySelector('#reload').addEventListener('click',e=>{
111    e.preventDefault();
112    location.reload();
113  });
114});
115//設定時刻をfugaとして保存
116window.addEventListener('DOMContentLoaded', ()=>{
117  document.querySelector('select').selected=true;
118  document.querySelector('#set').addEventListener('click',e=>{
119    e.preventDefault();
120    var fuga=document.querySelector('select');
121    document.cookie="fuga="+fuga.value+";max-age=573500000";
122  });
123});
124
125//設定+cookie
126$(function(){
127      $('.js-modal-open').on('click',function(){
128           $('.js-modal').fadeIn();
129           return false;
130      });
131      $('.js-modal-close').on('click',function(){
132         var date = new Date();
133         var midnight =  new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
134          document.cookie="cnt=1"+";expires="+midnight.toUTCString();
135           $('.js-modal').fadeOut();
136           return false;
137      });
138});
139
140
141//閉じる
142$(function(){
143   $('.work-modal-close').on('click',function(){
144      var date = new Date();
145      var midnight =  new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
146       document.cookie="cnt=1"+";expires="+midnight.toUTCString();
147        $('.work-modal').hide();
148        return false;
149   });
150});
151
152var cnt = $.cookie('cnt');
153
154//設定時刻と現在時刻を比較
155$(function(){
156   var login_hour = new Date().getHours();
157   if ((24-login_hour)-(24-fuga.value) >= 0){
158     $(function(){
159        if(cnt !=1){
160         $('.work-modal').show();
161         return false;
162      }else{
163         $('.work-modal').hide();
164         return false;
165      }
166     });
167   }
168});
169</script>