easyUI弹框被遮罩层遮挡

项目中用到easyui 布局,用到north,west,center三个区域,且在center中间区域嵌入iframe标签。在主内容区做一些小提示弹窗(例如删除前的弹窗提示确认)时,会遇到遮罩问题,由于center区域是iframe嵌套的,所以里面的小弹窗无法覆盖页面的头部和左边目录栏。

情形一、点击提示弹窗里的确认后,提示弹窗消失:

//warnTips为传入的值,例如successMask(“确定要删除选中的数据吗?”)
function successMask(warnTips){
    parent.$.messager.alert({
        title:‘‘,
        msg:warnTips,
        draggable:false,
        fn:function(){      
        }
    });

}

情形二、点击提示弹窗里的确认后,提示弹窗消失,并且页面跳转:

//使用方法,successMask(‘删除成功!‘,‘system/js/rolepermissions.jsp‘)function successMask(warnTips,url){
    parent.$.messager.alert({
        title:‘‘,
        msg:warnTips,
        draggable:false,
        fn:function(){
          //点击确认后,页面跳转
         window.location.href = url;
        }
    });

}

使用以上代码可以完美解决easyUI center区域iframe里的alert提示弹窗、confirm弹窗的遮罩问题。

这里再做一个拓展,如果是confirm确认弹窗,改如何处理遮罩问题?

例如删除前提示确认,点击确认后,内容被删除,再弹出删除成功提示框:

用如下代码,就可以解决问题

parent.$.messager.confirm({
        title:‘‘,
        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‘)
                        }else{
                            infoMask(data);              }        }     }}

原文地址:https://www.cnblogs.com/kt-blog/p/9948099.html

时间: 2024-10-09 10:29:49

easyUI弹框被遮罩层遮挡的相关文章

实现自己自定义的弹框和遮罩层

有的时候我们需要实现属于自己的弹框和弹出框的遮罩层效果,下面我给大家讲一下有javascript实现最简单的属于自己的弹框和弹框遮罩层效果,首先编写遮罩层的javascript,代码如下: 1.遮罩层js: //获得坐标 function getPosition() { var top = document.documentElement.scrollTop; var left = document.documentElement.scrollLeft; var height = documen

bootstrap弹框去除遮罩层效果

是通过css解决这个问题,核心css代码如下: .modal-backdrop { filter: alpha(opacity=0)!important; opacity: 0!important; } alpha和opacity通常是决定透明度. alpha和opacity区别是什么? 相同点:都是值为0表示完全透明,值为1表示完全不透明. 不同点:alpha可以应用元素特定的属性,只能作用于当前元素,其子元素不能继承,而opacity不仅仅作用于当前元素,也会影响子元素及其子子元素,具有继承

element-ui 弹出框在遮罩层下面

title: element-ui 弹出框在遮罩层下面 date: 2020-03-18 11:37:45 tags: elementUI 给 <el-dialog></el-dialog>添加:modal-append-to-body="false"属性 <el-dialog title="提示" :visible.sync="isDialogShow" :modal-append-to-body="fa

jQuery点击图片弹出大图遮罩层

使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产品展示功能过程中,因为要把产品图片的大图显示给用户看,就使用jQuery制作了一个插件:HoverTreeShow ,使用该插件可以很方便的弹出图片的大图,已经运用在项目中了,除了上面链接的示例外,HoverTreeTop项目的产品展示也是一个实例,请访问链接:http://hovertree.co

弹框和遮罩

遮罩可以用一个半透明的高度和宽度等于页面100%的div来做. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>东方证券</title> <meta name="description" content=""> <meta name="keywords" conten

关于ios的safari下,页面底部弹出登陆遮罩层,呼出软键盘时 问题解决

前阵子遇到了一个问题,就是手机端页面弹出遮罩+底部登陆的弹出层. 一般情况下就直接给fixed固定定位了,然而做测试时发现了一个很大的问题 iOS的safari下,固定定位会跑到整个页面的最底部,而不是当前页的最底部. 查了好多百度然而还是没有找到有用的解决方案,后来问了一位前端的大神,大神说这种情况下,需要区分两种状态, 一是默认状态,即 除了safari之外的其他浏览器(需要判断一下浏览器是否为safari) 二是 safari浏览器状态下,(由于公司只要求测UC,QQ浏览器,顾,发现  在

根据juery CSS点击一个标签弹出一个遮罩层的简单示例

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="JS/JavaScript/jq

显示遮罩层和弹出框

因为最近用到了遮罩层和弹出框,上网查资料后自己完成了一个,在此做一下记录做保存. 因为用到了jq,所以需要引入jq文件,比如jquery-1.11.3.js 以下是jsp的代码: <body> <div> <input id="button" type="button" value="点击我"> <div class="shareDialog"> <div class=&q

小程序实现弹出遮罩层模态框

<view bindtap='showRule'>点击弹出模态框</view> <!--遮罩层--> <view class="ruleZhezhao {{isRuleTrue?'isRuleShow':'isRuleHide'}}"> <view class='ruleZhezhaoContent'> <image src='/images/zijia.png' class="select">