つまり modal 内で summernote を使うと画像挿入時とかに modal の入れ子が発生することになる。
bootstrap modal って、意外と入れ子のことは考えられていないようで、皆さん苦労されているようです。そもそも入れ子にすべきじゃないってことなの？
というわけで、公式な対応ではなく無理矢理ここだけ対応、ということになる。
ニッチ対応とでも言うのか…こんなことに命名するのも馬鹿げているが。
まあなんとなくカッコいいほうが良いよねー、的な。
ニッチやなくてリッチになりたいでほんま。
さて、愚痴を吐いて少しスッキリしたところで本題。
summernote で画像挿入した場合、挿入した時に画像選択用モーダルが閉じる。
その閉じた際にbodyタグが操作されて親モーダルも閉じた状態になってしまう。
具体的には'modal-open'クラスが無くなって、style属性も変更される。
そこでそれを元に戻そう、というのが下記コード。
var body_style;
$('#parent-modal').on('show.bs.modal', function (e) {
if (e.target.id !== 'parent-modal') {
body_style = $('body').attr('style');
return;
}
// 親モーダル用処理
}).on('hidden.bs.modal', function (e) {
if (e.target.id !== 'parent-modal') {
if (body_style) $('body').attr('style', body_style).addClass('modal-open');
body_style = null;
return;
}
// 親モーダル用処理
});
子モーダルが開く時に親モーダルの「show」イベントも発火する。
まあそれはそれで不具合の元なのだが…今回はそれを利用して、、
子モーダルが開いた(と思わしき)時にbodyタグのstyle属性値を保存しておいて、子モーダルが閉じた(と思わしき)時に保存しておいたモノを戻す。そして'modal-open'クラスも付与。
ということをしてまーす。
そうそう。画像選択用モーダルのバツボタンを押して閉じた時、親モーダルまで閉じてしまうことにはワタクシメは気づいておりませんので。
もし気づいた方がいらっしゃったらご対応くださいませ＼(^o^)／
