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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Riot.js

Riot.jsは、React.jsに似たコンポーネント指向なJSフレームワークです。非常に軽量であり、コンポーネントで設計しやすいといったメリットがあります。また、MVCのように分割できることも特徴です。

JavaScript

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

Q&A

解決済

2回答

507閲覧

ある関数の第二引数目の関数を実行させたい

kazoogon

総合スコア281

Riot.js

Riot.jsは、React.jsに似たコンポーネント指向なJSフレームワークです。非常に軽量であり、コンポーネントで設計しやすいといったメリットがあります。また、MVCのように分割できることも特徴です。

JavaScript

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

0グッド

0クリップ

投稿2018/12/28 11:04

編集2018/12/28 13:16

環境

Riot.js経験者大歓迎ですが、JS使用者であれば理解いただける内容であると思います。

実現したい事

modal表示 → 画面のどこかclickでmodal閉じる
(現状はmodalそのものをclickしても閉じない)

コード

this.modalのtrue・falseでmodal開閉を操作しています

//modalがopenする関数 modalOpen(){ ShowHide.begins(function(){ this.modal = true; this.update(); }.bind(this), function(){ //(②)画面上modal以外をクリックすると起動 this.modal = false; this.update(); }.bind(this)); //**追加部分 ここでmodalが開いているか確認し、上のbeginsが起動される if (!ShowHide.isShow()){ Event.listenByShowHide(ShowHide); } } //modalのブロック要素clickでこの関数起動(modal閉じるように) close(){ this.modal = false; this.update(); } //begins(関係するメソッド追記) begins(Show, Hide){ this._Show = Show || null; this._Hide = Hide || null; return this; } //listenByShowHide(関係するメソッド追記) listenByShowHide(showHide, release=true){ showHide.show(); const element = showHide.getElement(); const fn = function(){ showHide.hide.call(showHide); }; this.listen(element, fn, release); }

これでも閉じますが、次にmodalOpen()を起動させるとbegins method第二引数目(②部分)が起動して、modalが表示されない。
→close()が起動される = beginsの第二引数目の関数が起動される。 にしたい、しかしその方法が不明なのでこちらで質問させていただきました。

よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

自己解決

共通関数でremove()という指定されたDOMを削除する関数があったので、それを使用。
第2引数の関数を実行させるか否かという問題ではなかった

投稿2018/12/28 22:47

kazoogon

総合スコア281

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

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

0

②のところはモーダルが開いていたら閉じる処理をして、モーダルが閉じてたら開く処理にすればいいのではないでしょうか?

投稿2018/12/28 11:49

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

kazoogon

2018/12/28 12:00

回答ありがとうございます! たぶん②の部分を this.modal = !this.modal にするのだと思いますが、そうすると modal開く → modal部分click(close()起動) → 次modalOpen()起動で一瞬modal表示されてすぐに消える という挙動になりますね。。
kazoogon

2018/12/28 12:03

↑これだと  modal部分clickで閉じる  →画面のどこか適当にclick = beginsの第2引数が起動してしまう という問題もありますね。。
退会済みユーザー

退会済みユーザー

2018/12/28 12:06

ああ、そっか モーダルを全画面に表示させるのは無理ですか? メインコンテンツは中央に表示させて、背景をつくるみたいな(透明でいい)
退会済みユーザー

退会済みユーザー

2018/12/28 12:22

begins method第二引数が起動される条件が分からないです。 上の文章には「modal以外をクリックすると起動」とありますが、それ以外にもあるのでしょうか?
kazoogon

2018/12/28 12:24

かなり良い案ですが、それだと modalでてくる → sidebarの何かclick(んでmodal閉じる) →もう一回clickしてsidebarの何かがやっと起動 になってしまいますね。。 申し訳ないです何度も何度も。。汗
kazoogon

2018/12/28 12:26

「modal以外をクリックすると第二引数目が起動」ですね
退会済みユーザー

退会済みユーザー

2018/12/28 12:28

”次にmodalOpen()を起動させるとbegins method第二引数目(②部分)が起動して、modalが表示されない。” この部分の操作はmodal以外をクリックしているということでしょうか?
kazoogon

2018/12/28 12:37

コード部分に追記いたしました。 modalが開いているかどうかをチェックしている箇所が抜けていました メソッドの中身が知りたい場合はまたご連絡ください
退会済みユーザー

退会済みユーザー

2018/12/28 13:08

周辺のソースコードも教えて欲しいです。(最小構成でいいので)
kazoogon

2018/12/28 13:16

追記いたしました
kazoogon

2018/12/28 13:18

ちなみに周辺コードは共通部分なので、変更は無しでお願いいたします。
退会済みユーザー

退会済みユーザー

2018/12/28 13:33

実際に手元で実行して動作確認をしたいのですがそこまで公開することは無理でしょうか? (最小構成でいいです、モーダル動作と関係ないものは全て取っ払ったもの)
kazoogon

2018/12/28 22:47

すみません、ご回答していただきましたが自己解決いたしました。 お時間取らせて申し訳ございませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問