Q&A
コードはマークダウンのcode機能を利用してご提示ください
前提・実現したいこと
IEでモーダルウィンドウを閉じた時に元の画像にフォーカスしたい。
ここに質問の内容を詳しく書いてください。
モーダルウィンドウで画像をクリックすると大きな画像を開くウェブページを作っている途中で困っています。マウス操作はうまく行っているのですが、Tabキーの操作では画像を開いている間は画像右上の×印以外にはフォーカスできないようにして、画像を閉じると元の画像にフォーカスしたいのです。ところが、ChromeとOperaでは思った通りに動くのですが、IE11、EdgeとFireFoxでは画像を閉じた後、フォーカスがどこにも当たっていない状態になり、一度画面をクリックしないと元の画像にフォーカスが戻りません。どうすればIE11、EdgeとFireFoxでも画像を閉じた後に元の画像にフォーカスを当てられるでしょうか？
■■な機能を実装中に以下のエラーメッセージが発生しました。
27行目のSetTimeout以下が一度画面をクリックしないと実行されないようです。
発生している問題・エラーメッセージ
特にエラーなどは出ません。
該当のソースコード
HTML
1 2<!DOCTYPE html> 3<html dir="ltr" lang="ja" data-whatintent="keyboard"> 4 5 <head> 6 <meta charset="UTF-8"> 7 <meta name="robots" content="NOINDEX,NOFOLLOW"> 8 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 9 <meta name="description" content=""> 10 <meta name="keywords" content="" > 11 <title>サンプル</title> 12 <link href="css/style.css" rel="stylesheet" type="text/css"> 13 <!--modalwindow--><link href="modalwindow_03_css/modalwindow_style.css" rel="stylesheet" type="text/css"> 14 <!--modalwindow--><link href="modalwindow_03_css/modalwindow.css" rel="stylesheet" type="text/css"> 15 <script src="javascript/jquery-1.12.4.js"></script> 16 <!--modalwindow--><script src="modalwindow_03_js/modalwindow.js"></script> 17 <!--[if (gte IE 6)&(lte IE 8)]><script type="text/javascript" src="javascript/selectivizr-min.js"></script><![endif]--> 18 <!--[if lt IE 9]><script type="text/javascript" src="javascript/html5shiv.js"></script><![endif]--> 19 <!--[if lt IE 9]><script type="text/javascript" src="javascript/css3-mediaqueries.js"></script><![endif]--> 20 </head> 21 22 <body> 23 <div id="modalwindow_01"> 24 25 <!-- ラッパー --> 26 <div id="wrapper"> 27 28 <!-- メイン --> 29 <div id="main" role="main"> 30 31 <section> 32 33 <div class="content"> 34 35 <div class="my-gallery clearfix" tabindex=-1> 36 37 <figure> 38 <a href="#modal-01" class="modal-open"><img src="photo/dansei_yokogao_thumb.jpg" alt="男性の横顔" /></a> 39 </figure> 40 <div class="modal-wrapper" id="modal-01" tabindex=-1> 41 <a href="#!" class="modal-overlay" tabindex=-1></a> 42 <div class="modal-window"> 43 <div class="modal-content"> 44 <img src="photo/dansei_yokogao.jpg" width="800" height="520" alt="男性の横顔"> 45 </div> 46 <a href="#" class="modal-close">×</a> 47 </div> 48 </div> 49 50 <figure> 51 <a href="#modal-02" class="modal-open"><img src="photo/smiling_ceo_thumb.jpg" alt="笑顔の社長" /></a> 52 </figure> 53 <div class="modal-wrapper" id="modal-02" tabindex=-1> 54 <a href="#!" class="modal-overlay" tabindex=-1></a> 55 <div class="modal-window"> 56 <div class="modal-content"> 57 <img src="photo/smiling_ceo.jpg" width="800" height="600" alt="笑顔の社長"> 58 </div> 59 <a href="#" class="modal-close">×</a> 60 </div> 61 </div> 62 63 <figure> 64 <a href="#modal-03" class="modal-open"><img src="photo/capable_secretary_thumb.jpg" alt="できる秘書" /></a> 65 </figure> 66 <div class="modal-wrapper" id="modal-03" tabindex=-1> 67 <a href="#!" class="modal-overlay" tabindex=-1></a> 68 <div class="modal-window"> 69 <div class="modal-content"> 70 <img src="photo/capable_secretary.jpg" width="800" height="534" alt="できる秘書"> 71 </div> 72 <a href="#" class="modal-close">×</a> 73 </div> 74 </div> 75 76 <figure> 77 <a href="#modal-04" class="modal-open"><img src="photo/smiling_lady_thumb.jpg" alt="微笑む女性" /></a> 78 </figure> 79 <div class="modal-wrapper" id="modal-04" tabindex=-1> 80 <a href="#!" class="modal-overlay" tabindex=-1></a> 81 <div class="modal-window"> 82 <div class="modal-content"> 83 <img src="photo/smiling_lady.jpg" width="800" height="600" alt="微笑む女性"> 84 </div> 85 <a href="#" class="modal-close">×</a> 86 </div> 87 </div> 88 89 90 <figure> 91 <a href="#modal-05" class="modal-open"><img src="photo/young_businessman_thumb.jpg" alt="若いビジネスマン" /></a> 92 </figure> 93 <div class="modal-wrapper" id="modal-05" tabindex=-1> 94 <a href="#!" class="modal-overlay" tabindex=-1></a> 95 <div class="modal-window"> 96 <div class="modal-content"> 97 <img src="photo/young_businessman.jpg" width="800" height="600" alt="若いビジネスマン"> 98 </div> 99 <a href="#" class="modal-close">×</a> 100 </div> 101 </div> 102 103 <figure> 104 <a href="#modal-06" class="modal-open"><img src="photo/this_is_a_point_thumb.jpg" alt="ここがポイントです" /></a> 105 </figure> 106 <div class="modal-wrapper" id="modal-06" tabindex=-1> 107 <a href="#!" class="modal-overlay" tabindex=-1></a> 108 <div class="modal-window"> 109 <div class="modal-content"> 110 <img src="photo/this_is_a_point.jpg" width="800" height="533" alt="ここがポイントです"> 111 </div> 112 <a href="#" class="modal-close">×</a> 113 </div> 114 </div> 115 116 </div> 117 118 </div> 119 </section> 120 121 </div> 122 <!-- / メイン --> 123 124 </div> 125 <!-- / ラッパー --> 126 127 <!--script src="javascript/what-input.js"></script--> 128 129 </div> 130 </body> 131</html>
JavaScript
1該当のソースコード 2 3$(function(){ 4 if($('.modal').hasClass('open')){ 5 $('.modal').removeClass('open'); 6 }else{ 7 $('.modal').addClass('open'); 8 } 9 var winScrollTop; 10 var lastFocusedElement; 11 $('.modal-open').on('click',function(){ 12 //スクロール位置を取得 13 winScrollTop = $('#modalwindow_01').scrollTop(); 14 //フォーカス位置を取得 15 lastFocusedElement = document.activeElement; 16console.log(lastFocusedElement); 17 setTimeout(function(){ 18 $('.modal-close').focus(); 19 }, 1001); 20 $('.modal-close').blur(function(){$(this).focus();$(this).select();}); 21 $('.modal-close').on('keydown', function(event) { 22 if((event.which === 9)||(event.which === 18)||(event.which === 116)||(event.which === 117)||(event.which === 119)||(event.which === 122)||(event.which === 123)) { 23 return false; 24 } 25 }); 26 }); 27 $('.modal-close').on('click',function(){ 28 $('.modal-close').blur(function(){ 29 setTimeout(function(){ 30console.log(lastFocusedElement); 31 $(lastFocusedElement).focus(); 32 }, 0); 33 $('#modalwindow_01').stop().animate({scrollTop:winScrollTop}, 100); 34 }); 35 }); 36 return false; 37});
試したこと
window.click();で強制的に画面をクリックした状態にしようと思ったのですが、うまく行きませんでした。
補足情報（FW/ツールのバージョンなど）
以下のURLに状況を再現したウェブページを作りました。Chrome、Operaで見ると何がやりたいか分かっていただけると思います。画像を閉じた後、開く際にクリックした画像にフォーカスを戻したいと思っています。IE11,Edge,FireFoxで見ると元の画像にフォーカスが戻らず、Tabキー操作ができなくなってしまいます。
回答1件
0
ベストアンサー
完全には再現できなかったのですが、イベントをバブリング（伝播）させるようにしないと駄目なので、return false;を実行するとイベントがそこで止まってしまいます。
また、modal-closeのイベントを実行するためには、cloneメソッドと同じように、バブリングの際に用いる記述に変更した方がいいかもしれません。
modalwindow.js
1$(function(){ 2 if($('.modal').hasClass('open')){ 3 $('.modal').removeClass('open'); 4 }else{ 5 $('.modal').addClass('open'); 6 } 7 var winScrollTop; 8 var lastFocusedElement; 9 $('.modal-open').on('click',function(){ 10 //スクロール位置を取得 11 winScrollTop = $('#modalwindow_01').scrollTop(); 12 //フォーカス位置を取得 13 lastFocusedElement = document.activeElement; 14 //alert(lastFocusedElement); 15 setTimeout(function(){ 16 $('.modal-close').focus(); 17 }, 1001); 18 $('.modal-close').blur(function(){$(this).focus();$(this).select();}); 19 $('.modal-close').on('keydown', function(event) { 20 if((event.which === 9)||(event.which === 18)||(event.which === 116)||(event.which === 117)||(event.which === 119)||(event.which === 122)||(event.which === 123)) { 21 //ここを消さないとイベントがバブリングされない。event.stopPropagation()でも行けるようです 22 //return false; 23 } 24 }); 25 }); 26//イベントバブリングするためには、第2引数を使う方が安定する。 27 $("document").on('click',".modal-close",function(){ 28 //alert(0); 29 $('.modal-close').blur(function(){ 30 setTimeout(function(){ 31 window.focus();$(lastFocusedElement).focus(); 32 }, 0); 33 $('#modalwindow_01').stop().animate({scrollTop:winScrollTop}, 100); 34 }); 35 }); 36 //return false; ieの場合はこっちもコメントアウトしないと、次に引き継がない 37}); 38
これで、いちおうはFirefoxとIE11でもタブキーのみで開閉できるようです。
投稿2020/01/09 10:50
編集2020/01/09 11:37
総合スコア3647
FKMさん、回答ありがとうございます。質問してから時間が経ってしまい、なかば回答は付かないものと諦めかけていたため返事が遅くなってしまいました。申し訳ありません。早速提示していただいたコードでやってみようと思っている所ですが、取り急ぎお礼まで。検証後にまたコメントさせていただきます。
FKMさん、ありがとうございます。おかげさまで実現したい事が思った通りにできました。イベントのバブリングという概念を知らなかったので勉強になりました。改めて質問が一つあるのですが、途中にコメントアウトして記述してあるalert(lastFocusedElement);とalert(0);はどんな意味があるのでしょうか？試しにコメントアウトを外してみたのですがアラートが出ませんでした。別途新しく質問として投稿した方が良いかとも思いましたが、話が繋がりにくいのでここで質問させていただきました。何にせよ、思った事が実現できて嬉しい限りです。重ねて、ありがとうございました。
すいません、もう一つ質問です。”cloneメソッドと同じように、バブリングの際に用いる記述に変更した方がいいかも”とはどういう事でしょうか、自分でも調べてみたのですがJavaScriptではなくJavaの概念のようでよく分かりませんでした。「バブリングの際に用いる記述」とは具体的にどのような記述なのでしょうか？
alert(0)はそのイベントに反応するかテストしたデバッグの跡です。システムでは不要ですので、消しておいていただければ。alertはデバッグにふさわしくないのですが、IEはバージョンによってconsole.logに反応しないので。
あと、cloneメソッドは、動的に要素を生成するときによく使うメソッドであると同時に、よく罠に陥る例です。今回も隠蔽されていた要素を動作しようとしている（つまり、JavaScriptで動的にDOMを生成している）ので、下の例と同じ要領で第2引数を設定した方がいいかも、という例で挙げました。ちょっとわかりづらいたとえで済みません
動的に生成したDOM要素に対してjQueryでイベントを設定する場合
https://qiita.com/negi/items/6ec0d3cedba499eac81a
FKMさん、コメントへの返信ありがとうございます。IEはconsole.logに反応しないことがあるというのは知りませんでした。cloneメソッドについては引き続き勉強していこうと思います。第2引数を設定した方が良いというのは提示していただいたサイトを見て分かりました。いろいろ教えていただきありがとうございました。
あなたの回答
tips
プレビュー
