解决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 相关文章推荐
js字符编码函数区别分析
Dec 28 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
基于form-data请求格式详解
Oct 29 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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
memcache命令启动参数中文解释
2014/01/13 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
Ionic快速安装教程
2016/06/03 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Django中URLconf和include()的协同工作方法
2015/07/20 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
Django 拆分model和view的实现方法
2019/08/16 Python
python实现图片插入文字
2019/11/26 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
献爱心倡议书
2014/04/14 职场文书
跑操口号
2014/06/12 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
2014年就业工作总结
2014/11/26 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书