解决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 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
javascript判断非数字的简单例子
Jul 18 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
javascript操作表格排序实例分析
May 06 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
Vue-Router的使用方法
Sep 05 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
js实现橱窗展示效果
Jan 11 Javascript
Node.js fs模块原理及常见用途
Oct 22 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自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
koa源码中promise的解读
2018/11/13 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
python元组操作实例解析
2014/09/23 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
python实现视频读取和转化图片
2019/12/10 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
如何用Python 加密文件
2020/09/10 Python
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
数学系毕业生求职信
2014/05/29 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
廉政承诺书范文
2015/04/28 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
七年级作文之下雨天
2019/12/23 职场文书