关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
当在bootstrap的modal中使用ckeditor时,使用ckeditor中带弹框的功能时无法输入问题。
解决方法:在jquery和bootstrap加载之后引入fix的js,js内容:
var $modalElement = this.$element; $(document).on('focusin.modal', function (e) { var $parent = $(e.target.parentNode); if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length // add whatever conditions you need here: && !$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) { $modalElement.focus() } })
参考此网址
以上这篇关于ckeditor在bootstrap中modal中弹框无法输入的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
废话不多说了直接给大家贴代码了,具体代码如下所示: $('#myModal').on('shown', function() { $(document).off('focusin.modal'); }); //显示modal $('#myModal').modal('show'); //show完毕前执行 $('#myModal').on('shown', function () { //加上下面这句!解决了~ $(document).off('focusin.modal'); // 打开Dia
-
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
当在bootstrap的modal中使用ckeditor时,使用ckeditor中带弹框的功能时无法输入问题. 解决方法:在jquery和bootstrap加载之后引入fix的js,js内容: var $modalElement = this.$element; $(document).on('focusin.modal', function (e) { var $parent = $(e.target.parentNode); if ($modalElement[0] !== e.target
-
浅析BootStrap中Modal(模态框)使用心得
BootStrap中Modal(模态框)描述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 一.modal使用: 1.1.登录bootstrap官网,点击下载Bootstrap 1.2.导入对应的样式文件css 1.3.导入对应的js,需要导入bootstrap.js或者bootstrap.min.j
-
BootStrap中的模态框(modal,弹出层)功能示例代码
bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集.务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现或功能. 默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8">
-
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
js代码 function initView(_box){ var $p = $(_box || document); $('a[target="dialog"]', $p).each(function(event){ $(this, $p).unbind('click').click(function(event){ openModal(event); }); }); } $(function(){ initView(); }); /**关闭modal*/ function hide
-
bootstrap模态框消失问题的解决方法
小编主要从网上整理了网友提出来的关于bootstrap模态框消失的不同问题,希望对大家有帮助. 状况一:bootstrap模态框瞬间消失解决 bootstrap模态框挺好,但这方面的例子很少,都是官方的代码,网上没有一点新的东西.比如,save changes,即点击确认后如何处理?没有例子.只有取消close的功能.我的需求是这样,点击一个链接,传一个id,打开模态框,进行输入.单选.列表选择等,点模态框确认,然后连同刚才的id.模态框中的各种值,一起提交到后台处理. 第一步:用链接传id并打
-
BootStrap模态框不垂直居中的解决方法
本文实例为大家分享了BootStrap模态框不垂直居中的解决方法,供大家参考,具体内容如下 解决问题:BootStrap自带的模态框不垂直居中 解决方案:调用BootStrap为我们提供的方法$('.modal').on('show.bs.modal', function(){}); 在模态框显示之前我们用JS修改他的Top值, 具体代码如下: /** * 垂直居中模态框 **/ function centerModals() { $('.modal').each(function(i) { v
-
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示 中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化 提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h
-
bootstrap中使用google prettify让代码高亮的方法
利用google prettify 让代码高亮,好看. 下载地址: http://code.google.com/p/google-code-prettify/ http://www.bootcdn.cn/prettify/ 网络引入地址: //cdn.bootcss.com/prettify/r298/prettify.min.js 效果图如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &quo
-
IE中鼠标经过option触发mouseout的解决方法
本文实例讲述了IE中鼠标经过option触发mouseout的解决方法.分享给大家供大家参考.具体分析如下: 要实现的功能: 有一个DIV,当鼠标经过时此DIV完全展开,当鼠标移开时DIV收缩回去,其中DIV里面有一个select选择框: 操作select的时候在IE中会出现一个问题,当鼠标经过option时,DIV会收缩回去,而在其他浏览器中无此现象. 解决的方法: 在IE中,当鼠标移到option时 window.event.toElement 的值为null,在其他浏览器中的值为objec
-
Android Studio中Run按钮是灰色的快速解决方法
首先是,在不同的AS中,gradle版本不同,下载的sdk版本不同,这些,都在gradle(Project.Models)相关代码里调过来就好.之前的文章里有说过. 经过调好gradle这些文件,AS已经可以built 成功后. 下一步,Run the application. 这时候,遇到问题:Run按钮灰色,失效. 点击Run旁边 Select Run/Debug Configuration按钮 选择 Edit Configuration,于是: 在model下拉框中选择app.如果下拉框中
随机推荐
- 用一整天的时间安装postgreSQL NTFS权限
- php生成二维码时出现中文乱码的解决方法
- C#实现获取一年中是第几个星期的方法
- php使用curl简单抓取远程url的方法
- asp.net 两个不同页面的传值
- JavaScript验证Email(3种方法)
- jquery实现的省市区三级联动
- LINUX中NGINX反向代理下的TOMCAT集群(详解)
- jQuery如何将选中的对象转化为原始的DOM对象
- jQuery实现点击下拉框中的值累加到文本框中的方法示例
- 为指定元素增加样式的js代码
- bootstrap table单元格新增行并编辑
- 详细分析JavaScript变量类型
- 微信小程序 跳转方式总结
- JAVA及相关字符集编码问题研究分享
- Python编程中实现迭代器的一些技巧小结
- Android学习笔记之ActionBar Item用法分析
- C#获取硬盘序列号的问题小结
- vue中使用axios post上传头像/图片并实时显示到页面的方法
- PHP 7.4中使用预加载的方法详解