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

Question

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

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

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

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

	//登録情報一覧画面(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内を読んでも分かりづらく困っております。

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

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

Comments

[x_x]

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

[smwb_man]

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

Answer 1

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

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

Comments

[smwb_man]

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

Answer 2

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

Comments

[smwb_man]

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

[kei344]

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

これは試しましたか？

[smwb_man]

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

[kei344]

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

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

[smwb_man]

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

Answer 3

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

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

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