解决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 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
不错的一个日期输入 动态
Nov 06 Javascript
一个可以显示阴历的JS代码
Mar 05 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
JQuery小知识
Oct 15 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
javascript对象的创建和访问
Mar 08 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 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生成QRcode实例
2014/09/22 PHP
PHP函数超时处理方法
2016/02/14 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
利用python实现周期财务统计可视化
2019/08/25 Python
下载官网python并安装的步骤详解
2019/10/12 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
实习生体会的自我评价范文
2013/11/28 职场文书
心理健康心得体会
2014/01/02 职场文书
武侯祠导游词
2015/02/04 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技