zoukankan      html  css  js  c++  java
  • easyui 中iframe嵌套页面,提示弹窗遮罩的解决方法,parent.$.messager.alert和parent.$.messager.confirm

    项目中用到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);
                  }
            }
         }
    }

     到这里,就解决了easyui 中iframe嵌套页面,提示弹窗遮罩显示的问题。parent.$.messager.alert和parent.$.messager.confirm。

  • 相关阅读:
    77777 77777(2) WriteUp 绕waf技巧学习
    简单sql注入学到的延时盲注新式攻击
    代码审计 => 74cms_v3.5.1.20141128 一系列漏洞
    mysql注入新姿势(数字与字符编码注入) hex,conv
    Netty 3升级Netty4实践
    微信小程序获取用户openid,头像昵称信息,后台java代码
    转:JSP 分页显示数据 (Oracle)
    从数据库提取数据通过jstl显示在jsp页面上
    转:微信生成二维码java
    转:微信开发获取地理位置实例(java,非常详细,附工程源码)
  • 原文地址:https://www.cnblogs.com/baiyangyuanzi/p/6625539.html
Copyright © 2011-2022 走看看