webuploader模态框ueditor显示问题解决方法

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"); //开始上传

var thumbnailWidth = 100; //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档

var thumbnailHeight = 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 = $(

'

'' +

'

'

),

$img = $li.find('img');

// $list为容器jquery实例

$list.append( $li );

// 创建缩略图

// 如果为非图片文件，可以不用调用此方法。

// thumbnailWidth x thumbnailHeight 为 100 x 100

uploader.makeThumb( file, function( error, src ) { //webuploader方法

if ( error ) {

$img.replaceWith('不能预览');

return;

}

$img.attr( 'src', src );

}, thumbnailWidth, thumbnailHeight );

});

// 文件上传过程中创建进度条实时显示。

uploader.on( 'uploadProgress', function( file, percentage ) {

var $li = $( '#'+file.id ),

$percent = $li.find('.progress span');

// http://避免重复创建

if ( !$percent.length ) {

$percent = $('

.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 = $('

}

$error.text('上传失败');

});

// 完成上传完了，成功或者失败，先删除进度条。

uploader.on( 'uploadComplete', function( file ) {

$( '#'+file.id ).find(http://'.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;

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。