当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

2017年12月12日  | 移动技术网IT编程  | 我要评论

废话不多说了直接给大家贴代码了，具体代码如下所示：

$('#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时弹出层文本框不能输入的问题，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网