質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

902閲覧

Nifty Modal Window Effectsでモーダルのクローズ動作前に確認処理を入れる

lyzmfeqpxs54

総合スコア237

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/08/13 06:57

編集2020/08/13 07:10

いつもお世話になっております。

現在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が呼び出されてしまう状況でした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問