前提・実現したいこと
HTMLでBOXを表示し
バツボタンを押すとフェードアウトするような処理を実装したのですが、スマホでは閉じることが出来なく困っています。
こんな少しのコードですがどこを修正したらよろしいのでしょうか?
よろしくお願いします。
該当のソースコード
HTML
1 <div class="float-box"> 2 <a href="リンク先" class="float-content"> 3 <p>内容</p> 4 </a> 5 <div class="close"> 6 <a href="javascript:void(0)" class="end-btn" style="cursor: pointer;"> 7 <img src="/img/close.png"> 8 </a> 9 </div> 10 </div>
js
1 $(function(){ 2 $('.end-btn').on('click', function(){ 3 $('.float-content').fadeOut(300); 4 }); 5 6 var clickEventType = (( window.ontouchstart!==null ) ? 'click':'touchend'); 7 $(document).on(clickEventType,'.end-btn',function(){ 8 $('.float-news').fadeOut(300); 9 }); 10 }); 11
css
1.close img { 2 width: 100%; 3} 4.end-btn { 5 width: 100%; 6 height: 100%; 7 z-index: 2; 8 cursor: pointer; 9} 10 11.close { 12 position: absolute; 13 top: 0; 14 right: 0; 15 width: 36px; 16 height: 36px; 17 cursor: pointer !important; 18} 19 20.float-box{ 21 position: fixed; 22 display: flex; 23 align-items: center; 24 border-width: 2px; 25 border-style: solid; 26 border-color: #bbbbbb; 27 border-radius: 10px; 28 background-color: #ffffff; 29 bottom: 30px; 30 left: 30px; 31 width: auto; 32 max-width: 480px; 33 min-width: 240px; 34 z-index: 2; 35 } 36 37
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/07/13 05:09
2021/07/13 05:23
2021/07/13 05:24
2021/07/13 05:26