webuploader模态框ueditor显示问题解决方法
webuploader模态框ueditor显示问题
模态框z-index对应的值
.modal{ z-index:10050!important; outline:none!important; }
遮罩层对应的z-index值
.modal-backdrop{ border:0!important; outline:none!important; z-index:10049!important; }
ueditor插件中,默认的z-index值为900;
在模态框中使用ueditor,可能会出现不兼容的情况,在ueditor.config.js里面修改z-index值,要比父级结构要大,否则,字体相关的下拉框还是会显示异常,也可以覆盖原来的z-index对应的样式,
.edui-default{ z-index:30111!important; }
webupload百度的上传插件,如果在模态框中使用,会出现点击无反应的情况,搜索得之,解决方式是在模态框显示时调用shown.bs.modal方法去初始化webuploader实例,但结局就是每次显示模态框都会导致选择文件的按钮越来越大。
以下是方式:
var$list=$("#thelist");//这几个初始化全局的百度文档上没说明,好蛋疼。 var$btn=$("#ctlBtn");//开始上传 varthumbnailWidth=100;//缩略图高度和宽度(单位是像素),当宽高度是0~1的时候,是按照百分比计算,具体可以看api文档 varthumbnailHeight=100; $("#upload_pic").modal('show'); $("#upload_pic").on("shown.bs.modal",function(){ uploader=WebUploader.create({ //选完文件后,是否自动上传。 auto:false, //swf文件路径 swf:base+'/statics/js/webUploader/Uploader.swf', //文件接收服务端。 server:base+'/upload/uploadImg', //选择文件的按钮。可选。 //内部根据当前运行是创建,可能是input元素,也可能是flash. pick:'#filePicker', //只允许选择图片文件。 accept:{ title:'Images', extensions:'gif,jpg,jpeg,bmp,png', mimeTypes:'image/*' }, method:'POST', }); //当有文件添加进来的时候 uploader.on('fileQueued',function(file){//webuploader事件.当选择文件后,文件被加载到文件队列中,触发该事件。等效于uploader.onFileueued=function(file){...},类似js的事件定义。 var$li=$( '<divid="'+file.id+'"class="file-itemthumbnail">'+ '<img>'+ '<divclass="info">'+file.name+'</div>'+ '</div>' ), $img=$li.find('img'); //$list为容器jQuery实例 $list.append($li); //创建缩略图 //如果为非图片文件,可以不用调用此方法。 //thumbnailWidthxthumbnailHeight为100x100 uploader.makeThumb(file,function(error,src){//webuploader方法 if(error){ $img.replaceWith('<span>不能预览</span>'); return; } $img.attr('src',src); },thumbnailWidth,thumbnailHeight); }); //文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress',function(file,percentage){ var$li=$('#'+file.id), $percent=$li.find('.progressspan'); //避免重复创建 if(!$percent.length){ $percent=$('<pclass="progress"><span></span></p>') .appendTo($li) .find('span'); } $percent.css('width',percentage*100+'%'); }); //文件上传成功,给item添加成功class,用样式标记上传成功。 uploader.on('uploadSuccess',function(file){ $('#'+file.id).addClass('upload-state-done'); }); //文件上传失败,显示上传出错。 uploader.on('uploadError',function(file){ var$li=$('#'+file.id), $error=$li.find('div.error'); //避免重复创建 if(!$error.length){ $error=$('<divclass="error"></div>').appendTo($li); } $error.text('上传失败'); }); //完成上传完了,成功或者失败,先删除进度条。 uploader.on('uploadComplete',function(file){ $('#'+file.id).find('.progress').remove(); }); }); $btn.on('click',function(){ uploader.upload(); });
解决每次点击显示modal导致上传按钮变大的方式为覆盖由webuploader生成的上传按钮样式
.webuploader-pick{ padding:0!important; width:82px!important; height:38px!important; line-height:38px!important; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。