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

http://www.tuicool.com/articles/iYni63A

 

有时候我们用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一下显示。看看效果图：