前提・実現したいこと
javascript,jQery初心者です。
バックブラウザしようとしたらモーダルを表示させ、<i>を押したら前のページに戻る仕組みを
作りたいと思っています。
発生している問題・エラーメッセージ
バックブラウザをしたらポップアップは表示させるところまでは完成したのですが、
<i>ボタンを押しても前のページに戻ることができません。
なので永遠にそのページから離脱することができなくなってしまいました、、、
該当のソースコード
javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2 3 <script> 4 $(function(){ 5 history.pushState(null, null, null); 6 $(window).on("popstate", function (event) { 7 history.pushState(null, null, null); 8 $('.modal-wrapper').fadeIn(); 9 }); 10 }); 11 </script>
CSS
1/*モーダル*/ 2.modal-wrapper{ 3 display: none; 4 position: fixed; 5 top: 0; 6 right: 0; 7 bottom: 0; 8 left: 0; 9 background-color: rgba(0, 0, 0, 0.6); 10 z-index: 100; 11} 12 13.modal { 14 position: absolute; 15 top: 20%; 16 left: 10%; 17 background-color: #e6ecf0; 18 padding: 40px 0 40px; 19 border-radius: 10px; 20 width: 80%; 21 height: auto; 22 text-align: center; 23} 24#image{ 25 width:100%; 26} 27 28.fa-times-circle-o { 29 position: absolute; 30 top: 12px; 31 right: 12px; 32 color: rgba(128, 128, 128, 0.46); 33 cursor: pointer; 34 font-size: 30px; 35} 36 37
HTML
1 <div class="modal-wrapper""> 2 <div class="modal"> 3 <div class="close-modal"> 4 <a href="javascript:history.back()"> 5 <i class="fa fa-times-circle-o" aria-hidden="true"></i> 6 </a> 7 </div> 8 <div id="ridatu-form"> 9 <a href="###"><img src="image.jpg" id="image" style="display:block;"></a> 10 </div> 11 </div> 12 </div>
試したこと
①はじめはjavascriptで一つ前の履歴を取得するような書き方をしていたのですが反映されず、
②HTMLのaタグで<i>に一つ前の履歴を取得すという記述の仕方にしてみました。
ですが
①<i>を押しても何も起こらない
②<i>を押すとモーダルの表示が消えまた表示される
補足情報(FW/ツールのバージョンなど)
バックブラウザを無効化しているからいけないのでしょうか、、、?
勉強中のため根本的にわかっていないところがあるかもしれません。
なにかヒントやアドバイスを頂けたら幸いです。
よろしくお願いいたします!
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/18 04:56 編集