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


Posted in Javascript onJune 05, 2017

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

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

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

Javascript 相关文章推荐
jquery获取tagName再进行判断
May 29 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
微信小程序如何连接Java后台
Aug 08 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
js判断密码强度的方法
Mar 18 Javascript
Vue2.0实现购物车功能
Jun 05 #Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 #Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 #Javascript
详解Angular 4 表单快速入门
Jun 05 #Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 #Javascript
Node.js开发第三方微信公众平台
Jun 05 #Javascript
js自定义Tab选项卡效果
Jun 05 #Javascript
You might like
PHP中用hash实现的数组
2011/07/17 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
Javascript - HTML的request类
2007/01/09 Javascript
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
python解析json实例方法
2013/11/19 Python
使用python统计文件行数示例分享
2014/02/21 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python语言的变量认识及操作方法
2018/02/11 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
python 装饰器的基本使用
2021/01/13 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
采购员的工作职责
2013/12/26 职场文书
大学生村官典型材料
2014/01/12 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
道德模范事迹材料
2014/12/20 职场文书
高中语文教学反思范文
2016/02/16 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python