登录  /  注册
首页 > web前端 > js教程 > 正文

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

php中文网
发布: 2016-05-16 18:19:44
原创
911人浏览过

jquery有个很不错的ui插件,dialog插件,他的官方网站上有各种形式的演示:http://jqueryui.com/demos/dialog/   ,可能大家用得比较多的还是它的默认模式,具体的用法官网上都有,也有中文的讲解地址,我就不再重复了,最近在弄弹出框架页,仔细一看,和dialog插件的modal form 模式很相似,demo演示效果:http://www.lovewebgames.com/addNews.aspx
修改jquery里的dialog对话框插件为框架页(iframe) 的方法_jquery
就是这么个效果,要进行登录注册弹出层,至于为什么我不直接用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('

');
// 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('');
},
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,平时多勾通下,有问题不用一个人想。
智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号