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


Posted in Javascript onDecember 27, 2016

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 = $(
     '<div id="' + file.id + '" class="file-item thumbnail">' +
     '<img>' +
     '<div class="info">' + file.name + '</div>' +
     '</div>'
    ),
    $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('<span>不能预览</span>');
     return;
    }

    $img.attr( 'src', src );
   }, thumbnailWidth, thumbnailHeight );
  });
  // 文件上传过程中创建进度条实时显示。
  uploader.on( 'uploadProgress', function( file, percentage ) {
   var $li = $( '#'+file.id ),
    $percent = $li.find('.progress span');
   // 避免重复创建
   if ( !$percent.length ) {
    $percent = $('<p class="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 = $('<div class="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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 #Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 #Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 #Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 #Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 #Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 #Javascript
jQuery获取选中单选按钮radio的值
Dec 27 #Javascript
You might like
一个程序下载的管理程序(三)
2006/10/09 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
PHP时间和日期函数详解
2015/05/08 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
pyshp创建shp点文件的方法
2018/12/31 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
详解pandas赋值失败问题解决
2020/11/29 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
数学专业推荐信范文
2013/11/21 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis