解决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常见问题整理(持续更新)
Aug 06 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 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
在Windows版的PHP中使用ADO
2006/10/09 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
jQuery的deferred对象详解
2014/11/12 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
vuex的简单使用教程
2018/02/02 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
python每隔N秒运行指定函数的方法
2015/03/16 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
python打开windows应用程序的实例
2019/06/28 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
进口业务员岗位职责
2014/04/06 职场文书
学校少先队工作总结
2015/08/12 职场文书
选购到合适的激光打印机
2022/04/21 数码科技