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的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
对xmlHttp对象的理解
Jan 17 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
Vertx基于EventBus发送接受自定义对象
Nov 16 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
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
python单线程下实现多个socket并发过程详解
2019/07/27 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
python基于property()函数定义属性
2020/01/22 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
网络编辑职责
2014/03/01 职场文书
中文专业自荐书
2014/06/29 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server