Mikel
[转载]easyui弹出层在最顶层显示跳出iframe框架通用javascript代码 – Angelasp – 博客园.
有时候我们用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" style="width: 400px; height: 210px;" title="标题" data-options="modal:true,closed:true,iconCls:\'icon-user-accept\'">'
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 class="easyui-linkbutton" data-bind="click:confirmClick">确定</a> '
html += ' <a class="easyui-linkbutton" data-bind="click:cancelClick">取消</a> '
html += '</div>
'
html += '
</div>
';
var winAudit= query(html).appendTo("body");
最后别忘了上面的那个open一下显示。看看效果图：
