修改jquery里的dialog对话框插件为框架页(iframe) 的方法


Posted in Javascript onSeptember 14, 2010

jquery有个很不错的ui插件,dialog插件,他的官方网站上有各种形式的演示:http://jqueryui.com/demos/dialog/   ,可能大家用得比较多的还是它的默认模式,具体的用法官网上都有,也有中文的讲解地址,我就不再重复了,最近在弄弹出框架页,仔细一看,和dialog插件的modal form 模式很相似,demo演示效果:http://www.lovewebgames.com/addNews.aspx
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
就是这么个效果,要进行登录注册弹出层,至于为什么我不直接用modal form来做呢?因为我喜欢,你管我。所以我就做了个jquery下面dialog的插件,需要引用原来dialog的文件。具体代码如下:

(function ($) { 
$.fn.openWidow = function (options) { 
var divId = "dialog" + Math.round(Math.random() * 100); 
var settings = { 
id: divId, 
width: 300, 
height: 200, 
modal: true, 
buttons: { 
}, 
show: "explode", 
hide: "highlight", 
title: "提示", 
url: "/test.aspx", 
close: function () { 
$("#" + this.id).remove(); 
//debugger 
if (document.getElementById(this.id)) 
document.body.removeChild(document.getElementById(this.id)); 
} 
}; 
if (options) { 
$.extend(settings, options); 
} 
$("body").append('<div id="' + settings.id + '" title="Dialog Title"><p class="loading"></p></div>'); 
// Dialog 
$('#' + settings.id).dialog({ 
autoOpen: false, 
title: settings.title, 
width: settings.width, 
height: settings.height, 
modal: true, 
bgiframe: true, 
show: settings.show, 
hide: settings.hide, 
buttons: settings.buttons, 
close: settings.close, 
open: function () { 
$("#" + settings.id).html('<iframe src="' + settings.url + '" frameborder="0" height="100%" width="100%" id="dialogFrame" scrolling="auto"></iframe>'); 
}, 
resizeStop: function () { 
$("#dialogFrame").css("width", parseInt($(this).css("width")) - 5); 
$("#dialogFrame").css("height", parseInt($(this).css("height")) - 5); 
} 
}); $('#' + settings.id).dialog("open"); 
return this; 
}; 
})(jQuery);

我想大家应该都还看得懂的,没啥复杂的,就是重复重复再重复的工作。甚至很多参数本身就是dialog的,我只是加了层皮。我相信这个方法是很多新手都希望用到的,毕竟不是每个人都喜欢并熟练使用ajax,所以这时候iframe的用途还是很大的。

并希望有兴趣的朋友加入我的Q群:70210212、5678537,平时多勾通下,有问题不用一个人想。

Javascript 相关文章推荐
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
关于js类的定义
Jun 28 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
js实现橱窗展示效果
Jan 11 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
基于jquery的划词搜索实现(备忘)
Sep 14 #Javascript
基于jquery的页面划词搜索JS
Sep 14 #Javascript
基于Jquery的实现回车键Enter切换焦点
Sep 14 #Javascript
js输出列表实现代码
Sep 12 #Javascript
JavaScript日历实现代码
Sep 12 #Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 #Javascript
网页中CDATA标记的说明
Sep 12 #Javascript
You might like
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
PHP基本语法总结
2014/09/06 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
js里的prototype使用示例
2010/11/19 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
matplotlib中legend位置调整解析
2017/12/19 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
简述 Python 的类和对象
2020/08/21 Python
python 自动识别并连接串口的实现
2021/01/19 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
J2EE中常用的名词进行解释
2015/11/09 面试题
初中三年毕业生的自我评价分享
2014/02/14 职场文书
书法大赛策划方案
2014/06/04 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书