默认情况下,模态框的zIndex是高于Uediter zIndex,模态框的z-index:是1050,这个可以在bootrap.css中可见,例:
.modal{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:1050;
display:none;
overflow:hidden;
-webkit-overflow-scrolling:touch;
outline:0;
},Uediter zIndex初始化可以设定,默认一般是900,但多数默认是注释状态,初始化设定,例:
$editor = {
init:function(id) {
varue = UE.getEditor(id, {
toolbars: [
['fullscreen','indent','undo','redo','bold','underline','source',
]
],
zIndex:1200
});
returnue;
}。
此时我们设定Uediter的z-index高于模态框。
2.然后是模态框里的全屏问题:通常请款下模态框都比较小,让用户在模态框里的编辑器写东西,用户体验肯定不好。所以要将ueditor全屏。要使ueditor能在bootstrap模态框里正常全屏显示需要修改ueditor.all.js里面的setFullScreen函数
在while (Container.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(““);//将class类名按空格分成数组,便于找到modal
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会被其他元素覆盖掉
3.模态框中Uediter最后全屏不是问题。瞧