いつもお世話になっております。
現在Railsでweb開発をしております。
Nifty Modal Window Effectsというライブラリを用いてモーダルウィンドウを開閉できる状態です。
モーダルの上部のmd-closeまたは後ろの背景であるmd-overlayをクリックするとモーダルが閉じる状態です。
この閉じる処理を行う手前で、本当に閉じるか否かの確認を入れたいと考えております。
もともとのコードは下記コードのようになっております。
html
1 2<div class="modal md-modal md-effect-1" id="modal-1"> 3 <div class="md-content"> 4 <%= image_tag 'xxx.png', class: "close_bt md-close", id: 'md-close' %> 5 <div class="md-inner" id="md-inner"> 6 <!-- モーダル内 --> 7 </div> 8 </div> 9</div> 10 11<!-- モーダル背景 --> 12<div class="md-overlay"></div> 13
js
1<script type="text/javascript"> 2 var ModalEffects = (function() { 3 4 function init() { 5 6 var overlay = document.querySelector( '.md-overlay' ); 7 8 [].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) { 9 10 var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ), 11 close = modal.querySelector( '.md-close' ); 12 13 function removeModal( hasPerspective ) { 14 15 classie.remove( modal, 'md-show' ); 16 17 if( hasPerspective ) { 18 classie.remove( document.documentElement, 'md-perspective' ); 19 } 20 21 } 22 23 function removeModalHandler() { 24 removeModal( classie.has( el, 'md-setperspective' ) ); 25 } 26 27 el.addEventListener( 'click', function( ev ) { 28 classie.add( modal, 'md-show' ); 29 overlay.removeEventListener( 'click', removeModalHandler ); 30 overlay.addEventListener( 'click', removeModalHandler ); 31 32 if( classie.has( el, 'md-setperspective' ) ) { 33 setTimeout( function() { 34 classie.add( document.documentElement, 'md-perspective' ); 35 }, 25 ); 36 } 37 }); 38 39 close.addEventListener( 'click', function( ev ) { 40 ev.stopPropagation(); 41 removeModalHandler(); 42 }); 43 44 } ); 45 46 } 47 48 init(); 49 50 })(); 51 52</script>
function removeModalを以下のように書き換えることでoverlay押したときには想定した動作になるのですが、md-closeボタンを押した際に表示される確認画面のOK キャンセル のどちらかを押すと、画面が固まって動かなくなります。
js
1function removeModal( hasPerspective ) { 2 3 if(confirm('閉じてよろしいですか?')){ 4 classie.remove( modal, 'md-show' ); 5 6 if( hasPerspective ) { 7 classie.remove( document.documentElement, 'md-perspective' ); 8 } 9 } 10} 11
正しく動作させる方法をご存知の方がいらっしゃましたらご教示いただけますと幸いです。
よろしくお願いいたします。
――――――――――――――――――――― 追記 ―――――――――――――――――――――
上記の修正方法ですと繰り返しモーダルを開閉するたびに、その回数分confirmが呼び出されてしまう状況でした。
あなたの回答
tips
プレビュー