モーダルウィンドゥの中で CKEditor を使う方法

TwitterBootstrap（ver3系） の モーダルウィンドゥ内に
CKEditorを表示させると、エディタで使う（表の要素を指定したり、
画像を挿入する際の）各ダイアログボックスが入力できなくなります。
z-index系で何かおかしくなっていると思うのですが、どうにも直りません。

海外の記事ですが、jQueryUI のダイアログを使った際にも
同じ現象が発生するとのこと。
「jQuery Forum: can’t edit fields of CKEditor in jQuery UI modal dialog」
こちらの記事を参考にしてみたのですが、解決には至りませんでした。

フレームワーク内の問題は根深そうなので、発想を変えて、
TwitterBootstrapのモーダルウィンドゥは使わず、自作することにしました。
結果的にうまく動作するようになりましたので、備忘録として掲載します。

ビューの末尾に以下を追加する
(モーダルウィンドゥの背景)
※本サイトで使用している Bootstrap のクラスとバッティングして、要素が隠れてしまうので、全角で書いています。
半角に直してお使い下さい。

＜ｄｉｖ ｉｄ="ｇｌａｙLayer" ｃｌａｓｓ="ｈｉｄｅ">＜/div＞

元のモーダルウィンドゥとして使っていた要素から、以下のクラスを削除。

class="modal fade"

モーダルウィンドゥを表示させるボタンから以下の属性を削除

data-toggle='modal'

モーダルウィンドゥと、その背景はデフォルトでは隠しておく必要があるので
CSSに以下を追加し、モーダルウィンドゥの要素とその背景にクラスを追加しておきます。

.hide {
    display: none;
}

モーダルウィンドゥを表示させるためのCSSを追加します。
ここはアスキーの「jQueryによるLightbox風モーダルウィンドウの作り方」
　を参考に
少し改修させて頂きました。

html,body{
    margin:0;
    padding:0;
    height:100%;
}
#glayLayer{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    filter: alpha(opacity=60);  /* 0-100 */
    zoom:1;
    -moz-opacity: 0.6;  /* 0.1-1.0 */
    opacity: 0.6;  /* 0.1-1.0 */
    -khtml-opacity: 0.6;  /* 0.1-1.0 */
    -ms-filter: "alpha(opacity=60)";  /* 0-100 */
}

#ModalEdit {
    position: fixed;
    top:50%;
    left:50%;
    margin-top: -360px;
    margin-left: -450px;
    z-index: 99;
}

モーダルウィンドゥの z-index の値は、うまくいかない場合は
値を大きくしてみてください。

次にリスト（）要素の中のボタンがクリックされたら、モーダルウィンドゥが
表示されるよう、要素を隠すクラスを削除するイベントを登録します。

$(document).on('click', '#DataList .editBtn', function(){
    $("#glayLayer").removeClass("hide");
    $("#ModalEdit").removeClass("hide");
});

また、通常「X」ボタンと「キャンセル」でモーダルウィンドゥを閉じますが反映されていないので
こちらもイベントを登録します。

$(document).on('click', '#ModalEdit .close',function(){
    $("#glayLayer").addClass("hide");
    $("#ModalEdit").addClass("hide");
});

モーダルウィンドゥの「キャンセル」ボタンに cancel といったクラスを追加して、
上記と同じ処理を登録すればOKです。

$(document).on('click', '#ModalEdit .cancel',function(){
    $("#glayLayer").addClass("hide");
    $("#ModalEdit").addClass("hide");
});

長くなりましたが、これで実装は完了です。
体感的に、フェードアウト・フェードインのアニメーションがない分、
動作が早く感じられるようになりました。

行き詰まってブラックボックスをいじっているようだと思ったら、
自分で出来る方法に切り替えるのも解決策のひとつではないかと思います。