这两天发现一个很蛋疼的问题,就是uploadify+dialog在ie上弹出框的关闭按钮是失效的,在其他浏览器全部OK,折腾 了半天,网上也搜了许久,一直没解决。所以领导说要既然解决不了,就去掉dialog,就用一个showDialog来实现,但是我觉得不好看,所以到网上找啊找,终于找到一个能满足要求的玩意,跟大家分享下。
1.样式
/* box */
.box{position:absolute;width:400px;left:50%;height:auto;z-index:100;background-color:#fff;border:1px #fff solid;padding:1px;}
.box h2{height:25px;font-size:14px;background-color:#CCC;position:relative;padding-left:10px;line-height:25px;color:#000;}
.box h2 a{position:absolute;right:5px;font-size:12px;color:#fff;}
.box .mainlist{padding:10px;}
#TB_overlayBG{background-color:#666;position:absolute;z-index:99;left:0;top:0;display:none;width:100%;height:100%;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
2.弹出层
<div id="TB_overlayBG"></div>
<div id="uploadFileDialog" class="box" style="display:none">
<h2>
<span>文件上传<a href="#" class="close">关闭</a>
</span>
</h2>
<div class="mainlist">
<input id="uploadFile_upload" name="uploadFile_upload" type="file" multiple="true">
<div class="form-ele-wrap h200 enable-scroll">
<div id="uploadFile_queue"></div>
</div>
<div class="btn-panel btn-dialog">
<a id="uploadFile_uploadBtn" class="buttonClass">开始上传</a>
<a id="uploadFile_uploadCancel" class="buttonClass">取消所有上传</a>
</div>
</div>
</div>
3.js代码
function openDialog() {
$("#TB_overlayBG").css({
display : "block",
height : $(document).height()
});
$("#uploadFileDialog").css({
left : ($("body").width() - $(".box").width()) / 2 - 20
+ "px",
top : ($(window).height() - $(".box").height()) / 2
+ $(window).scrollTop() + "px",
display : "block"
});
}
function closeDialog() {
$("#TB_overlayBG").css("display", "none");
$("#uploadFileDialog").css("display", "none");
}
分享到:
相关推荐
jQuery Dialog 是 jQuery UI 库中的一个组件,它提供了一种方便的方式来创建模态或非模态对话框。Dialog 可用于显示警告、确认消息、输入框等,增强了用户交互体验。 1. **初始化 Dialog** 初始化 Dialog 可以通过...
在本文中,我们将深入探讨如何在ASP.NET MVC4框架下,利用JQuery Dialog插件创建一个弹出对话框,并在其中集成Uploadify组件实现多文件上传功能。这将涉及前端JavaScript库、后端C#处理逻辑以及数据库交互,旨在提供...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...
使用jQuery UI插件以拖动方式管理相册 第9章 使用browser对象获取浏览器信息 使用boxModel对象检测是否是W3C盒子模型 使用$.each()工具函数遍历数组 使用$.each()工具函数遍历ajaxSettings对象 使用$.grep()...
总的来说,这个实例展示了如何使用Struts2和Uploadify插件实现在web应用中上传多文件的功能,包括前端的UI设置、事件监听以及后台的文件处理逻辑。这对于任何需要用户上传文件的项目都是一个基础且实用的示例。
Dialog弹框可能是基于jQuery UI或自定义的JavaScript组件,用于提示用户信息或者进行交互。 5. **Uploadify上传插件**:Uploadify是一个基于jQuery的文件上传插件,它支持多文件选择、进度条显示和错误处理等功能。...
**DWZ富客户端框架** 是一个专为Web应用设计的高效、轻量级的JavaScript框架,旨在简化网页的开发...同时,由于其开源性质,开发者可以在遇到问题时参考源码或寻求社区的帮助,进一步提高了开发效率和解决问题的能力。
- **社区交流**:加入相关技术社区,与其他开发者交流经验,解决问题。 #### 四、DWZ与其它JS框架的区别 - **最大优点**:DWZ相较于其他框架更专注于Web应用的快速开发,特别是在Ajax交互方面具有独特优势。 - **...
DWZ富客户端框架,作为一款由国人自主研发的RIA(Rich Internet Application)框架,其核心构建在jQuery基础上,旨在提供一种简单实用、易于扩展且能快速进行Web应用开发的解决方案。其设计初衷聚焦于“简单实用、...
- **jQuery 1.4.2和jquery.validate.js在IE的兼容问题**:需要关注特定版本的jQuery和插件之间的兼容性问题,并采取相应的解决方案。 #### 五、版本控制与升级 - **版本命名规则**:DWZ遵循一定的版本命名规则,...
- **jQuery1.4.2和jquery.validate.js在IE的兼容问题**: 更新到最新版本以解决兼容性问题。 - **升级jQuery1.4.2注意事项**: 在升级前备份代码并测试新版本的兼容性。 - **weblogic访问xml问题**: 调整weblogic...