当前访客身份:游客 [ 登录  | 注册加入尚学堂]
直播

我来了!

拥有积分:3866
尚学堂雄起!!威武。。。

博客分类

笔记中心

课题中心

提问中心

答题中心

解答题中心

easyui弹出层在最顶层显示跳出iframe框架通用javascript代码

我来了! 发表于 2年前 (2014-11-03 09:57:58)  |  评论(5)  |  阅读次数(3970)| 1 人收藏此文章,   我要收藏   

有时候我们用easyui在后台框架中弹框的时候,总是显示在框架页面里面而不是整个系统框架的上面,看着有些不太乐意。

        dialog = function (opts) {
            var query = parent.$, fnClose = opts.onClose;
            opts = query.extend({
                title: 'My Dialog',
                width: 400,
                height: 220,
                closed: false,
                cache: false,
                modal: true,
                html: '',
                url: '',
                viewModel: query.noop
            }, opts);

            opts.onClose = function () {
                if (query.isFunction(fnClose)) fnClose();
                query(this).dialog('destroy');
            };

            if (query.isFunction(opts.html))
                opts.html = utils.functionComment(opts.html);
            else if (/^\#.*\-template$/.test(opts.html))
                opts.html = $(opts.html).html();

            var win = query('<div></div>').appendTo('body').html(opts.html);
            if (opts.url)
                query.ajax({ async: false, url: opts.url, success: function (d) { win.empty().html(d); } });

            win.dialog(opts);
            query.parser.onComplete = function () {
                if ("undefined" === typeof ko)
                    opts.viewModel(win);
                else
                    ko.applyBindings(new opts.viewModel(win), win[0]);

                query.parser.onComplete = query.noop;
            };
            query.parser.parse(win);
            return win;
        };

 接下来我们来看看怎么调用这个通用的弹出方法:

        var query = parent.$;
        var winAudit = query("#angelasp_div");
        winAudit.dialog('open');

 这样看起来是不是是很简单别忘了angelasp_div这个div或者标签窗体代码要在顶层框架页面中定义:

如果你想让框架页面没那么多繁琐的html代码,那么我们还可以这样写:

                var html = '<div id="w_angelasp_div">'
                html += '    <div id="angelasp_div" class="easyui-dialog"  title="标题" data-options="modal:true,closed:true,iconCls:\'icon-user-accept\'" style="width:400px;height:210px;" buttons="#w_audit_div_button">'
                html += '        <div class="container_16" style="width:90%;margin:5%;"> '
                html += '            <div class="grid_13 val">窗体内容<div>          '
                html += '        </div>                                                  '
                html += '    </div>                                                     '
                html += '    <div id="w_audit_div_button" class="audit_button">'
                html += '        <a href="javascript:void(0)" data-bind="click:confirmClick" class="easyui-linkbutton" iconCls="icon-ok" >确定</a> '
                html += '        <a href="javascript:void(0)" data-bind="click:cancelClick" class="easyui-linkbutton" iconCls="icon-cancel" >取消</a> '
                html += '    </div>  '
                html += '</div>';
                var winAudit= query(html).appendTo("body");

 最后别忘了上面的那个open一下显示。看看效果图:

 

分享到:0
关注微信,跟着我们扩展技术视野。每天推送IT新技术文章,每周聚焦一门新技术。微信二维码如下:
微信公众账号:尚学堂(微信号:bjsxt-java)
北京总部地址:北京市海淀区西三旗桥东建材城西路85号神州科技园B座三层尚学堂 咨询电话:400-009-1906 010-56233821
Copyright 2007-2015 北京尚学堂科技有限公司 京ICP备13018289号-1 京公网安备11010802015183