修改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与函数式编程解释
Apr 27 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
javascript初学者常用技巧
Sep 02 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
VUE递归树形实现多级列表
Jul 15 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
PHP的explode和implode的使用说明
2011/07/17 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
jquery validate poshytip 自定义样式
2012/11/26 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
在Python中使用列表生成式的教程
2015/04/27 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
python dumps和loads区别详解
2020/02/04 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
关于Python解包知识点总结
2020/05/05 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
Structs界面控制层技术
2013/10/11 面试题
机修工工作职责
2014/02/21 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
企业党员公开承诺书
2014/03/26 职场文书
出生证明公证书
2014/04/09 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书