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

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

ただいまの
回答率

91.01%

  • JavaScript

    13815questions

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

  • jQuery

    5815questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    411questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

remodal.jsでモーダル表示を切り替える際に一瞬背景が消えるのを阻止したい

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 527

smwb_man

score 2

▼remodal.js
http://vodkabears.github.io/remodal/

上記のremodal.jsを利用しております。
下記のような流れでモーダル表示された子ウィンドウ1から子ウィンドウ2へ
モーダル表示の内容を切り替えるという事を行っているのですが、
子ウィンドウ1から子ウィンドウ2に切り替わるタイミングと
子ウィンドウ2から子ウィンドウ1に戻るタイミングに
背景(.remodal-overlay)が一瞬消えてしまう為、
画面がチラつくような状態になってしまいます。

【画面フロー】
親ウィンドウ ⇔ 子ウィンドウ1(登録情報一覧:モーダル表示) ⇔ 子ウィンドウ2(情報編集画面:モーダル表示)

    //※以下、呼び出し・再表示の処理のみ抜粋。

    //登録情報一覧画面(regist_list)モーダル表示処理
    $(".btn_listdisp").on('click',function (event) {
        event.preventDefault();
        var popup = $('[data-remodal-id=regist_list]').remodal();
        popup.open();
    });

    //情報編集画面(regist_edit)モーダル表示処理
    $(document).on('click','.btn_editdisp',function (event) {
        event.preventDefault();
        var popup2 = $('[data-remodal-id=regist_edit]').remodal();
        popup2.open();
    });

    //一覧画面再表示処理
    var listpop = $('[data-remodal-id=regist_list]').remodal();
    $(document).on('closed', '.regist_edit', function () {
        listpop.open();
    });

背景を残しつつ切り替えることが出来ればと思っているのですが、
remodal.js内を読んでも分かりづらく困っております。

もし、変更箇所などが分かりましたらご教示頂けますと幸いです。

【補足】
・子ウィンドウ1と子ウィンドウ2の中身に表示したい内容のサイズが異なる上、処理の都合上でも問題がある為、子ウィンドウの中身を書き換えるという手段が利用できません。
・「一覧画面再表示処理」の「closed」は以前「closing」で書いておりましたが、2つ目の子ウィンドウを表示した際にIEでフリーズしてしまう不具合があった為、「closed」に変更しております。
・子ウィンドウ2は子ウィンドウ1内のクラス名「btn_editdisp」というボタンをクリックした際に表示されます。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2017/09/06 17:38

    子ウィンドウ2は子ウィンドウ1上の操作で呼ばれるモーダルウィンドウなのでしょうか?

    キャンセル

  • smwb_man

    2017/09/06 17:44

    ご質問ありがとうございます。子ウィンドウ2は子ウィンドウ1内のクラス名「btn_editdisp」というボタンをクリックした際に表示される流れとなります。

    キャンセル

回答 3

+2

何かおかしいと思ったら、これ一個しか開けないんですね。
アニメ無効にする手。

.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
  -webkit-animation-duration: 0s;
  animation-duration: 0s;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/07 09:26

    このような記述でアニメーションを無効にできるんですね。
    ご提案ありがとうございます。

    キャンセル

+1

子ウィンドウを「閉じて開いて」するよりも、子ウィンドウの中身を書き換えるようなフローにすればよいのでは?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/06 16:37

    ご回答ありがとうございます。
    子ウィンドウの中身に表示したい内容のサイズが異なる為、難しいかと考えております…。
    (一覧画面は幅が広いのですが、編集画面は幅が狭くなるようなイメージです。)
    また、処理の都合上で色々と問題がある為、出来れば子ウィンドウの切り替えで対応したいと考えております。申し訳ございません。

    キャンセル

  • 2017/09/06 16:41

    【GitHub - vodkabears/Remodal: No longer actively maintained.】
    https://github.com/VodkaBears/Remodal#remodal
    > $(document).on('closing', '.remodal', function (e) {

    これは試しましたか?

    キャンセル

  • 2017/09/06 17:01

    ご確認ありがとうございます。
    質問の参考ソース内の「closed」の処理は以前「closing」で行っていたのですが、2つ目の子ウィンドウを表示した際にIEでフリーズしてしまう不具合があった為、「closed」に変更したという経緯があります。
    ただ、「closing」で書いたとしても背景は一瞬消えてしまう状態でした。

    キャンセル

  • 2017/09/06 17:08 編集

    とりあえず後出しで情報を小出しにするのは回答者としてやりにくいです。試したことや背景を含めて質問分に書かれることをお勧めします。

    1. 子ウィンドウ1を表示したタイミングで .remodal-overlay のCSSを上書きして透明にする
    2. .remodal-overlay と同じ場所に自作 .remodal-overlay を作成し、背景としてそれを使うようにする
    3. 子ウィンドウ2を消すタイミングで元に戻す
    これくらいしか思いつきません。
    あとはサイズ変更を後からできるタイプのモーダルライブラリに切り替えるかですね。

    キャンセル

  • 2017/09/06 17:33

    何度もお手数おかけして申し訳ございません。
    背景を残して切り替えを行うことが目的だった為、overlay周りに手を入れる事しか考えておらず、子ウィンドウ内の情報やclosingの処理の流れは不要かと思っておりました。すみません。
    また、追加でご提案を頂きまして、ありがとうございます。
    ご提案頂いた内容でうまくいきそうなパターンを思いついたので少し試してみたいと思います。
    お手数おかけしてしまい、申し訳ございませんでした。

    キャンセル

check解決した方法

0

kei344様、x_x様ご提案ありがとうございました。

最終的にkei344様にご提案頂いた内容からヒントを得て、
1.「remodal-overlay」のCSSより背景の設定を削除(透明化)
2.自作の「remodal-overlay2(背景あり)」を「remodal-overlay」と同じように作成
3.子ウィンドウ1の表示時に「remodal-overlay2」を表示する
4.子ウィンドウ2の表示時は「remodal-overlay2」について操作を行わない
5.子ウィンドウ1を閉じる際に「remodal-overlay2」を非表示にする
という内容で実現することが出来ました。

色々とアドバイスを頂き、ありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 91.01%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    13815questions

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

  • jQuery

    5815questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    411questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。