解決Boostrap模態(tài)框中使用Uediter不能全屏問題。


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最后全屏不是問題。瞧


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容