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

jquery有个很不错的ui插件,dialog插件,他的官方网站上有各种形式的演示:http://jqueryui.com/demos/dialog/ ,可能大家用得比较多的还是它的默认模式,具体的用法官网上都有,也有中文的讲解地址,我就不再重复了,最近在弄弹出框架页,仔细一看,和dialog插件的modal form 模式很相似,demo演示效果:http://www.lovewebgames.com/addNews.aspx 就是这么个效果,要进行登录注册弹出层,至于为什么我不直接用modal form来做呢?因为我喜欢,你管我。所以我就做了个jquery下面dialog的插件,需要引用原来dialog的文件。具体代码如下我想大家应该都还看得懂的,没啥复杂的,就是重复重复再重复的工作。甚至很多参数本身就是dialog的,我只是加了层皮。我相信这个方法是很多新手都希望用到的,毕竟不是每个人都喜欢并熟练使用ajax,所以这时候iframe的用途还是很大的。







(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"> </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); 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值