解决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 注意事项 与原因分析
Apr 24 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 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_id示例代码
2014/01/08 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
js实现json数组分组合并操作示例
2019/02/12 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
基于Python实现一个简单的银行转账操作
2016/03/06 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
销售内勤岗位职责
2014/04/15 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
离职感谢信怎么写
2015/01/22 职场文书
领导离职感言
2015/08/03 职场文书
安全教育日主题班会
2015/08/13 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
关于 Python json中load和loads区别
2021/11/07 Python
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers