easyui 中iframe嵌套页面，提示弹窗遮罩的解决方法，parent.$.messager.alert和parent.$.messager.confirm - 白杨-M - 博客园
随笔 - 164, 文章 - 0, 评论 - 1, 引用 - 0
项目中用到easyui 布局，用到north,west,center三个区域，且在center中间区域嵌入iframe标签。在主内容区做一些小提示弹窗（例如删除前的弹窗提示确认）时，会遇到遮罩问题，由于center区域是iframe嵌套的，所以里面的小弹窗无法覆盖页面的头部和左边目录栏。
情形一、点击提示弹窗里的确认后，提示弹窗消失：
//warnTips为传入的值，例如successMask(“确定要删除选中的数据吗？”)
function successMask(warnTips){
parent.$.messager.alert({
msg:warnTips,
draggable:false,
fn:function(){　　　　　　
情形二、点击提示弹窗里的确认后，提示弹窗消失，并且页面跳转：
//使用方法，successMask('删除成功！','system/js/rolepermissions.jsp')function successMask(warnTips,url){
parent.$.messager.alert({
msg:warnTips,
draggable:false,
fn:function(){
　　//点击确认后，页面跳转
window.location.href =
使用以上代码可以完美解决easyUI center区域iframe里的alert提示弹窗、confirm弹窗的遮罩问题。
这里再做一个拓展，如果是confirm确认弹窗，改如何处理遮罩问题？
&例如删除前提示确认，点击确认后，内容被删除，再弹出删除成功提示框：
用如下代码，就可以解决问题
parent.$.messager.confirm({
msg:'确定要删除选中的数据吗?',
draggable:false,
fn:function(boolean){
if(boolean){//确定删除操作
var id = $(obj).attr ("id");
$.ajaxSettings.async = false;
$.get("roleAction!deleteRole.html",{q:new Date().getTime(),id:id},function(data){
if(data=='success'){
successMask('删除成功！','system/js/rolepermissions.jsp')
infoMask(data);　　　　　　　　　　　　　　}　　　　　　　　}　　　　　}}
&到这里，就解决了easyui 中iframe嵌套页面，提示弹窗遮罩显示的问题。parent.$.messager.alert和parent.$.messager.confirm。一、$.messager.alert()类似js中的alert('String')
　　方法参数：title, msg, icon, function(回调函数)
　　描述：title头部面板标题、msg主要消息内容、icon：消息图标，可用值有(error,question,info,warning)、function回调函数
　　　　$.messager.alert({
　　　　　　　　title:'消息',
　　　　　　　　msg:'完成加载...',
　　　　　　　　icon:'info',
　　　　});
案例2：$.messager.alert('消息','完成加载...','info');　　　　　　　　注意参数的列表顺序，不用加"{}"号！
案例3回调函数：
　　　　$.messager.alert('消息','完成加载...','info',function(){
　　　　　　alert('退出！！');
　　　　　　}
　　　　);
二、$.messager.show()类似于QQ的消息提示
　　方法参数：showType、 showSpeed、msg、title、
　　描述：
　　　　showType：定义将如何显示该消息。可用值有：null,slide,fade,show。默认：slide。　　　　showSpeed：定义窗口显示的过度时间。默认：600毫秒。　　　　width：定义消息窗口的宽度。默认：250px。　　　　height：定义消息窗口的高度。默认：100px。　　　　title：在头部面板显示的标题文本。　　　　msg：显示的消息文本。　　　　style：定义消息窗体的自定义样式。　　　　timeout(很少用)：如果定义为0，消息窗体将不会自动关闭，除非用户关闭他。如果定义成非0的树，消息窗体将在超时后自动关闭。默认：4秒。
案例：$.messager.show({showType:'slide', showSpeed:'600',msg:'马化腾:Q币充值成功！！！',title:'小提示'});
三、$.messager.confirm()显示一个&确定&、&取消&提示窗口！
　　　　参数：title, msg, function(回调函数)
　　　　描述：title：在头部面板显示的标题文本。
　　　　　　　msg：显示的消息文本。　　　　　　　function(r):
当用户点击&确定&按钮的时侯将传递一个true值给回调函数，否则传递一个false值。
案例1：　　　　$.messager.confirm('提示','你要退出系统吗?',function(r){
　　　　　　　　　　if(r){
　　　　　　　　　　　　　　'确定'
　　　　　　　　　　}{
　　　　　　　　　　　　　　'取消'
　　　　　　　　　　}
　　　　　　　});
四、$.messager.prompt()提示窗口confirm，不同的是可以输入信息！
　　　　参数：title, msg, function(回调函数)
　　　　描述：
　　　　　　title：在头部面板显示的标题文本。
　　　　　　msg：显示的消息文本。　　　　　　function(val): 在用户输入一个值参数的时候执行的回调函数。&
案例：$.messager.prompt('小提示','请输入你的名字',function(r){
　　　　if(r){
　　　　　　$('#t').val(r);//动态的修改input标签文本内容
五、$.messager.progress() 进度条
　　　　参数：
　　　　　　title：在头部面板显示的标题文本。默认：空。　　　　　　msg：显示的消息文本。默认：空。
　　　　　　text：在进度条上显示的文本。默认：undefined。　　　　　　interval：每次进度更新的间隔时间。默认：300毫秒。　　　　方法定义为：　　　　　　bar：获取进度条对象。　　　　　　close：关闭进度窗口。
　　　　$.messager.progress({
　　　　　　　　title:'提示',
　　　　　　　　msg:'文本',
　　　　　　　　text:'努力中...',
　　　　　　　　interval:'600'
　　　　});
　　显示进度消息窗口。
$.messager.progress();
　　关闭进度消息窗口。
$.messager.progress('close');
阅读(...) 评论()jQuery EasyUI 教程
jQuery EasyUI 窗口插件 - Messager 消息框
通过 $.messager.defaults 重写默认的 defaults。
消息框（messager）提供不同样式的消息框，包括警示（alert）、确认（confirm）、提示（prompt）、进展（progress）等等。所有的消息框都是异步的。用户可以在与消息框交互后使用回调函数来完成一些动作。
linkbutton
progressbar
$.messager.alert('Warning','The warning message');
$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
&&&&&&&&alert('ok');
确定按钮的文本。
取消按钮的文本。
$.messager.show
在屏幕的右下角显示一个消息窗口，options 参数是一个配置对象：
showType： 定义消息窗口如何显示。可用的值是：null、slide、fade、show。默认是 slide。
showSpeed： 定义消息窗口完成显示所需的以毫秒为单位的时间。默认是 600。
width：定义消息窗口的宽度。默认是 250。
height：定义消息窗口的高度。默认是 100。
title：头部面板上显示的标题文本。
msg：要显示的消息文本。
style：定义消息窗口的自定义样式。
timeout：如果定义为 0，除非用户关闭，消息窗口将不会关闭。如果定义为非 0 值，消息窗口将在超时后自动关闭。默认是 4 秒。
代码实例：
$.messager.show({
&&&&title:'My Title',
&&&&msg:'Message will be closed after 5 seconds.',
&&&&timeout:5000,
&&&&showType:'slide'
// show message window on top center
$.messager.show({
&&&&title:'My Title',
&&&&msg:'Message will be closed after 4 seconds.',
&&&&showType:'show',
&&&&style:{
&&&&&&&&right:'',
&&&&&&&&top:document.body.scrollTop+document.documentElement.scrollTop,
&&&&&&&&bottom:''
$.messager.alert
title, msg, icon, fn
显示一个警告提示窗口。参数：
title：显示在头部面板上的标题文本。
msg：要显示的消息文本。
icon：要显示的图标图片。可用的值是：error、question、info、warning。
fn：当窗口关闭时触发的回调函数。
代码实例：
$.messager.alert('My Title','Here is a info message!','info');
$.messager.confirm
title, msg, fn
显示一个带"确定"和"取消"按钮的确认消息窗口。参数：
title：显示在头部面板上的标题文本。
msg：要显示的消息文本。
fn(b)：回调函数，当用户点击确认按钮时传递一个 true 参数给函数，否则给它传递一个 false 参数。
代码实例：
$.messager.confirm('Confirm', 'Are you sure to exit this system?', function(r){
&&&&if (r){
&&&&&&&&//
$.messager.prompt
title, msg, fn
显示一个带"确定"和"取消"按钮的消息窗口，提示用户输入一些文本。参数：
title：显示在头部面板上的标题文本。
msg：要显示的消息文本。
fn(val)：带有用户输入的数值参数的回调函数。
代码实例：
$.messager.prompt('Prompt', 'Please enter your name:', function(r){
&&&&if (r){
&&&&&&&&alert('Your name is:' + r);
$.messager.progress
options or method
显示一个进度的消息窗口。
options 定义如下：
title：显示在头部面板上的标题文本，默认值是 '' 。
msg：消息框的主体文本，默认值是 '' 。
text：显示在进度条里的文本，默认值是 undefined 。
interval：每次进度更新之间以毫秒为单位的时间长度。默认值是 300。
方法定义如下：
bar：获取进度条（progressbar）对象。
close：关闭进度窗口。
代码实例：
显示进度消息窗口。
$.messager.progress();
现在关闭消息窗口。
$.messager.progress('close');
记住登录状态
重复输入密码