モーダルウィンドウにおける処理に関して

モーダルウィンドウにてMP3の再生ページを構築したいです。

フェードインにてMP3再生バーを表示させて、フェードアウトにて元のページに戻るように作っているのですが、firefoxで表示させた場合、再生バーをクリックすると、元に戻るフェードアウトが効いてしまい、再生バーを上手く操作できません。
他、主要なブラウザでは、再生バーを触っても、元に戻るフェードアウト処理が効かないので問題ないのですが、一応、どのブラウザでも問題が起きないよう、再生バーを触っている時点では、元のページに戻らないようにするにはどうすればいいか、ご教授願えれば有り難いです。

宜しくお願いします。

■HTML

<td id="music"><img src="m1.jpg"></td>



<div class="overlay" id="overlay1">
<p><audio src="music1.mp3" controls id="audio"></audio></p>
</div>

■JS

$("#music").click(function() {
$("#overlay1").fadeIn();
});
$("#overlay1").click(function() {
document.getElementById("audio").pause();
document.getElementById("audio").currentTime = 0;
$("#overlay1").fadeOut();
});

■CSS

div.overlay{
display: none;
width: 100%;
height:100%;
padding-top: 10%;
text-align: center;
position: fixed;
top: 0;
z-index: 100;
background: rgba(0,0,0,0.7);
}

No.1 ベストアンサー 回答者： fujillin 回答日時： 2017/03/13 09:44

こんにちは

どのようなUIを考えていらっしゃるのか明示してありませんが、スクリプトを見る限りは「オーディオ要素に触ると（クリックすると）フェードアウトする」ように記述されているので、その通りの処理になっているとも言えます。

＞主要なブラウザでは、～～問題ないのですが
たまたまコントロールに触ってもイベントが発生しないというのは、あくまでもブラウザ依存の仕様ではないでしょうか？


明示されていないのでよくわかりませんが、「オーディオ要素のコントローラ以外の部分をクリックしたら閉じる」ということをなさろうとしているのでしょうか？

ユーザにとっての認識のし易さや誤操作の可能性を考えると、個人的にはあまり良いUIとは思えませんが、どうしてもそれで実現なさりたいのであれば、上記の通りにことを行えば良さそうです。
クリックの位置を取得して『コントローラ以外の部分だったら閉じる』というスクリプトにしておけばよろしいでしょう。
（イベントが発生しないブラウザの場合でも問題は起きないでしょう。）

audio要素にはcontroller属性が存在するようですが、残念ながら、そこからサイズや位置は取得できないようです。
https://developer.mozilla.org/ja/docs/Web/API/HT …
コントローラのサイズ・位置などはブラウザ（及びバージョン）依存と思いますので、事前に調べておいて切り分けることになりそうですね。


以下はあくまでも個人的な感想ですが・・・
（ご質問文の本文には記載がありませんが）タイトルに「モーダルウィンドウ」とありますので、もしもオーディ要素を（疑似）モーダルで表示しているのであれば、多くのlightBox系のUIと同じように
　・閉じるアイコンをクリック
　・ウィンドウ外（マスクレイヤ）をクリック
　・ESCキーの押下げ
などで閉じるようにしておくのが、ユーザには理解しやすいものとなるのではないかと想像します。

この回答へのお礼

ご教授、ありがとうございます。

UIは特にデザインを指定しておらず、「audioのcontrols」にまんま依存しています。
各ブラウザに動作が依存しているのも、言われる通り、そのままですね。

やりたいことも、言われる通り「オーディオ要素のコントローラ以外の部分をクリックしたら閉じる」これをやりたかったのですが、どう処理すれば良いのかが分かりませんでした。

ただ、ご指摘頂いた文書から検索の幅が広がったので、もう少し自力で頑張ってみようと思います。
感謝です＾＾/
ありがとうございましたm(_ _)m

お礼日時：2017/03/13 17:46