解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

网友投稿 375 2023-05-10


解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

废话不多说了直接给大家贴代码了,具体代码如下所示:

$('#myModal').on('shown', function() {

$(document).off('focusin.modal');

});

//显示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"]');

})

下面是我在项目中的应用,请大家注意加注释的那一句!

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 (settihttp://ng.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("");

$('#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();

}

以上所述是给大家介绍的解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:bootstrap multiselect 多选功能实现方法
下一篇:Vue2.0实现购物车功能
相关文章

 发表评论

暂时没有评论,来抢沙发吧~