easyui弹出层在最顶层显示跳出iframe框架通用javascript代码
2014-11-02 14:15
375 查看
有时候我们用easyui在后台框架中弹框的时候,总是显示在框架页面里面而不是整个系统框架的上面,看着有些不太乐意。
接下来我们来看看怎么调用这个通用的弹出方法:
这样看起来是不是是很简单别忘了angelasp_div这个div或者标签窗体代码要在顶层框架页面中定义:
如果你想让框架页面没那么多繁琐的html代码,那么我们还可以这样写:
最后别忘了上面的那个open一下显示。看看效果图:
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一下显示。看看效果图:
相关文章推荐
- easyui弹出层在最顶层显示跳出iframe框架通用javascript代码
- easyui弹出层在最顶层显示跳出iframe框架通用javascript代码
- jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
- easyui弹出框在最顶层显示跳出iframe框架js代码
- Easyui弹出窗体在iframe的父级页面显示
- javascript原生代码实现通用运动框架
- JavaScript跳出iframe框架
- JavaScript跳出iframe框架
- 如何让EasyUI弹出层跳出框架
- GreyFrame是一个遮罩弹出显示页面的JS类, 它可以允许你像在框架(如: frame和iframe)中打开一个链接.
- javascript 弹出窗口中是否显示地址栏的实现代码
- Easyui弹出窗体在iframe的父级页面显示
- EasyUI iframe 里 dialog 模态 弹出 到 顶层
- [ASP.NET2.0]Common层通用代码之JavaScript弹出信息框
- [ASP.NET2.0]Common层通用代码之JavaScript弹出新窗体
- javascript弹出对话框显示ASP代码
- javascript 弹出窗口中是否显示地址栏的实现代码
- 用javascript控制iframe滚动的代码
- 用Javascript判断图片是否存在,不存在则显示默认图片的代码
- 在textarea中显示html页面的javascript代码