bootstrap中使用modal加載kindeditor時彈出層文本框不能輸入的問題

答案來自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-fieldhtml

$('#myModal').on('shown', function() {
    $(document).off('focusin.modal');
});

這個是國內同窗的解決方法:bootstrap

http://www.oschina.net/question/226830_143869編輯器

//顯示modal
$('#myModal').modal('show');
//show完畢前執行
$('#myModal').on('shown', function () {
        //加上下面這句!解決了~
        $(document).off('focusin.modal');
    // 打開Dialog後建立編輯器
    KindEditor.create('textarea[name="content"]', {
        resizeType : 1
    });
})
//hide完畢前執行
$('#myModal').on('hidden', function () {
    // 關閉Dialog前移除編輯器
    KindEditor.remove('textarea[name="content"]');
})

 

下面是我在項目中的應用,請你們注意加註釋的那一句!ide

function computeMaskHeight() {
            var obj = $("#blockLoading");
            var parent = obj.parent();
            obj.height(parent.height());
        }

        function block(opt) {
            var defaults = {
                title: "",
                showClose: true,
                showOk: true,
                showBottom: true,
                showTitle: true,
                showHead: true,
                onOk: function() {
                },
                onShown: function(e) {
                }
            };
            var setting = $.extend(defaults, opt);
            $("#blockTitle").html(setting.title);
            if (setting.showClose) {
                $("#closeBlock, #closeBlockX").show();
            } else {
                $("#closeBlock, #closeBlockX").hide();
            }

            if (setting.showOk) {
                $("#blockOk").show();
            } else {
                $("#blockOk").hide();
            }
            $("#blockOk").unbind().click(function() {
                setting.onOk();
            });

            if (setting.showBottom) {
                $("#blockBottom").show();
            } else {
                $("#blockBottom").hide();
            }

            if (setting.showHead) {
                $("#blockHead").show();
            } else {
                $("#blockHead").hide();
            }
            $("#blockBody").html("<i class='icon-spinner icon-spin icon-4x'></i>");
            $('#blockContainer').off('shown.bs.modal').on('shown.bs.modal', function (e) {
                $(document).off('focusin.modal');//解決編輯器彈出層文本框不能輸入的問題http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field
                setting.onShown(e);
            });
            $("#blockContainer").modal();

        }
相關文章
相關標籤/搜索