easyui弹出层在最顶层显示跳出iframe框架通用javascript代码
有时候我们用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一下显示。看看效果图:
easyui弹出层在最顶层显示跳出iframe框架通用javascript代码的更多相关文章
- 如何让EasyUI弹出层跳出框架
这个的解决方法其实挺简单的. 只要在最外面的框架页面加个div,然后用parent.div的id就可以的.但是必须得弹出框得是一个页面. <div id="div_info" ...
- 使用JavaScript实现弹出层效果
声明 阅读本文需要有一定的HTML.CSS和JavaScript基础 设计 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 < ...
- js弹出层
js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...
- webui-popover 一个轻量级的jquery弹出层插件
该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用.它支持IE7以上的浏览器. 首先要引入需要的css js 文件 <link rel="s ...
- 【Javascript Demo】遮罩层和百度地图弹出层简单实现
其实想做的就是显示百度地图的弹出层,现在已经简单实现了.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: <!DOCTYPE html PUBLIC "-//W3C/ ...
- Web前端设计模式--制作漂亮的弹出层
设计场景: Ben最近在负责一个购书网站,在网站的首页上,有一个叫做“最新上架”的板块,板块的内容比较简单,只有书籍名称,作者姓名和上架时间(如图),当初设计的时候并i没有过于丰富的构思... 现在问 ...
- 使用JavaScript实现弹出层效果的简单实例
转自:https://www.jb51.net/article/85475.htm 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 ...
- bootstrap弹窗、弹出层、modal
bootstrap弹窗.弹出层.modal 引入bootstrap的js文件 如下div代码 <div class="modal fade" id="myMo ...
- JavaScript实现弹出层(以layer.open为例)
首先,引用layer,自行下载. 添加如下两行 <script src=" ../layer/jquery.min.js"></script> <sc ...
随机推荐
- 【夔堂】:程序血泪史之——有一种垃圾语言叫做JavaScript
"Prototype"机制是个半成品OOP,有些文章说这玩意当初为了"简单(编写).容易(学习)"而发明的,但web前端技术发展到今天我们看到,JS显然是需要O ...
- DataGrid中的常用属性
DataGrid中的常用属性 $('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',w ...
- 阿里云centos7搭建wordpress环境
阿里云搭建wordpress系统 一.购买阿里云 二.安装php开发环境 1. https://www.apachefriends.org/zh_cn/index.html网站下载linux下的xam ...
- Constraint4:default约束
Default约束的作用是在insert语句执行时,如果未显式给指定的column赋值,那么使用默认值给column赋值:如果在Insert命令中显式为指定的Column赋值,那么将插入显式值.每一列 ...
- 让虚拟机的软盘盘符不显示(适用于所有windows系统包括Windows Server)
- 利用typescript使backbone强类型智能提示
模型类一旦多了没有强类型和智能提示是相当痛苦的,所以. 仅仅用ts定义一个模型类: class Person extends Backbone.Model { defaults = { Name:&q ...
- ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分(2)用户登录、注销
上次实现了用户注册,这次来实现用户登录,用到IAuthenticationManager的SignOut.SignIn方法和基于声明的标识.最后修改用户注册代码实现注册成功后直接登录. 目录: ASP ...
- MVC4做网站后台:栏目管理1、添加栏目
把栏目添加删除跟前台混在一起结构清晰,现在有了后台管理的区域就把后台管理相关的代码分开. 要实现功能: 1.添加栏目 2.删除栏目 3.修改栏目信息 -- 一.开始 1.添加 接口InterfaceC ...
- Android图片处理
相信做Android开发的小伙伴对于Android图片压缩.裁剪一定有很深的印象,今天我将带领大家一起学习一下这个看着高深莫测的知识,以便再以后的学习.工作中可以帮助到大家. 首先我们看一下这个问题出 ...
- AngularJS之Filter(二)
前言 本节我们来讲讲AngularJS中主要的部分之一,那就是过滤器,当从后台获取到的数据呈现到视图上时,此时可能需要对数据进行相应的转换,此时我们可以通过过滤器在不同页面进行不同数据的格式抓换,在A ...