博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
解决Ueditor在bootstarp 模态框中全屏问题
阅读量:4484 次
发布时间:2019-06-08

本文共 1451 字,大约阅读时间需要 4 分钟。

基本的一些配置就不说了。先说一下要注意的问题:首先是zIndex的设置。记住最好都显示设置模态框和ueditor的zIndex。理清他们的层叠关系。

特别是用到ueditor里面的图片上传功能的更要设好zIndex的值。具体要怎么设就不说了,有问题再讨论。

然后是模态框里的全屏问题:通常请款下模态框都比较小,让用户在模态框里的编辑器写东西,用户体验肯定不好。所以要将ueditor全屏。要使ueditor能在bootstrap模态框里正常全屏显示需要修改ueditor.all.里面的setFullScreen函数

 

在 while (.tagName != "BODY") { }里面加上以下这段代码://解决在modal上ueditor不能全屏的问题

  

var position = baidu.editor.dom.domUtils.getComputedStyle(container, "position");                            nodeStack.push(position);                            var isModal = false;                            //判断该dom是否为modal                            var classes = $(container).attr('class');                            if (classes !== undefined) {                                classes = classes.split(' ');                                for (var i = 0; i < classes.length; i++) {                                    if (classes[i] == "modal") {                                        isModal = true;                                    }                                }                            }                            //如果是modal,则不设置position为static                            if (!isModal) {                                container.style.position = "static";                            }                            container = container.parentNode;

其实就是判断ueditor的父container是不是bootstrap模态框。如果是,则不将container.style.position设为static。否则全屏的ueditor会被其他元素覆盖掉

 

转载于:https://www.cnblogs.com/wanghaixing/p/7122368.html

你可能感兴趣的文章
XSS跨站攻击
查看>>
C/C++ http协议加载sessionID
查看>>
个人应用开发详记. (二)
查看>>
一款由css3和jquery实现的卡面折叠式菜单
查看>>
uva 10791
查看>>
openlayers 4快速渲染管网模型数据
查看>>
Mysql数据库插入数据乱码问题,解决方案!
查看>>
MySQL相关小技巧
查看>>
C语言--乱写C语言
查看>>
C# 之 Word光标移动 GoTo 方法
查看>>
SSH整合-&nbsp;2-&nbsp;add&nbsp;service&nbsp;layout
查看>>
Object_equals 方法
查看>>
Python学习笔记(matplotlib篇)--注释
查看>>
如何领导员工成为项目管理者?
查看>>
有意思的String字符工具类
查看>>
每日一句(2014-10-23)
查看>>
导航栏切换按钮事件
查看>>
<metro>Application Data
查看>>
Android 中 关闭部分 Activity 的方法总结
查看>>
管道及页面生命周期
查看>>