1.模態(tài)框與?Uediter?zIndex設(shè)定:
默認(rèn)情況下,模態(tài)框的zIndex是高于Uediter zIndex,模態(tài)框的z-index:是1050,這個(gè)可以在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初始化可以設(shè)定,默認(rèn)一般是900,但多數(shù)默認(rèn)是注釋狀態(tài),初始化設(shè)定,例:
$editor = {
init:function(id) {
varue = UE.getEditor(id, {
toolbars: [
['fullscreen','indent','undo','redo','bold','underline','source',
]
],
zIndex:1200
});
returnue;
}。
此時(shí)我們?cè)O(shè)定Uediter的z-index高于模態(tài)框。
2.然后是模態(tài)框里的全屏問題:通常請(qǐng)款下模態(tài)框都比較小,讓用戶在模態(tài)框里的編輯器寫東西,用戶體驗(yàn)肯定不好。所以要將ueditor全屏。要使ueditor能在bootstrap模態(tài)框里正常全屏顯示需要修改ueditor.all.js里面的setFullScreen函數(shù)
在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類名按空格分成數(shù)組,便于找到modal
for (var i = 0;i < classes.length; i++) {
if(classes[i] == "modal") {
isModal= true;
}
}
}
//如果是modal,則不設(shè)置position為static
if (!isModal) {
container.style.position = "static";
}
container =container.parentNode;
其實(shí)就是判斷ueditor的父container是不是bootstrap模態(tài)框。如果是,則不將container.style.position設(shè)為static。否則全屏的ueditor會(huì)被其他元素覆蓋掉
3.模態(tài)框中Uediter最后全屏不是問題。瞧