嵌套 iframe 遮罩 及将iframe中的内容传递到父级

1、点击父级a标签 改变iframe的src显示不同的内容

<a target="iframe的name值" data="url地址" class="buttons"></a>
<iframe id="show" name="iframe的name值" src="" scrolling="no" frameborder="0" 
onload="this.height=this.contentWindow.document.documentElement.scrollHeight" style="width: 100%;"></iframe>
jQuery(".buttons").click(function () {
   jQuery(this).attr("href", jQuery(this).attr("data"));
});

2、遮罩

在父级页面添加div

//全屏遮罩
<div id="mark" style="position: fixed; display: none; background: #ccc; opacity: .5; z-index: 98; padding: 10px; width: 100%; height: 100%;">
</div>
//显示内容
<div id="msgs" style="position: fixed; display: none; z-index: 99; padding: 10px; width: 400px; right: 0px; top: 30%">
</div>
//点击删除
<div id="msgsshow" style="position: fixed; display: none; text-align: center; line-height: 15px; z-index: 100; padding: 5px;
 border: 1px solid #ccc; width: 10px; height: 10px; right: 15px; top: 32%; border-radius: 50%;">X</div>

在子页面添加相应的js

<script>
        jQuery(document).ready(function () {
       //影藏所有相关遮罩
            jQuery("#msgs", window.parent.document).hide();
            jQuery("#msgsshow", window.parent.document).hide();
            jQuery("#mark", window.parent.document).hide();
       //点击遮罩的时候影藏全部内容
            jQuery("#mark", window.parent.document).click(function () {
                jQuery("#msgs", window.parent.document).html("");
                jQuery("#msgs", window.parent.document).hide();
                jQuery("#msgsshow", window.parent.document).hide();
                jQuery("#mark", window.parent.document).hide();
            })
            //
            jQuery("#msgsshow", window.parent.document).click(function () {
                jQuery("#msgs", window.parent.document).html("");
                jQuery("#msgs", window.parent.document).hide();
                jQuery("#msgsshow", window.parent.document).hide();
                jQuery("#mark", window.parent.document).hide();
            })
            jQuery(".showmsg").click(function () {
          //返回消息内容
                jQuery.ajax({
                    type: "POST",
                    url: "/Manager/Handler/UpdateState.ashx",
                    data: { flag: "ArtMsg", intid: jQuery(this).attr("pid") },
                    success: function (data) {
                        if (data.status == "1") {
                            var str = "";
                            jQuery.each(data.msg, function () {
                                if (this.NEXTSTATUS < 0) {
                                 str = str+"<div class='notibar msgerror'><p>错误信息:"+this.OPINION+" 时间:"+this.OPERATETIME + "</p></div>";
                                } else {
                                str = str+"<div class='notibar msgsuccess'><p>消息提醒:"+this.OPINION+"时间:"+this.OPERATETIME + "</p></div>";
                                }
                            })
                            if (str == "") {
                                str = "<div class='notibar msginfo'><p>没有响应的数据</p></div>";
                            }
                            jQuery("#msgs", window.parent.document).html(str);
                            jQuery("#msgs", window.parent.document).show();
                            jQuery("#msgsshow", window.parent.document).show();
                            jQuery("#mark", window.parent.document).show();
                        } else {
                            var stsr = "";
                            stsr = "<div class='notibar msginfo'><p>查询有误</p></div>";
                            jQuery("#msgs", window.parent.document).html(str);
                            jQuery("#msgs", window.parent.document).show();
                            jQuery("#msgsshow", window.parent.document).show();
                            jQuery("#mark", window.parent.document).show();
                        }
                    },
                    dataType: "json"
                });
            });
            jQuery("#btnAdds").click(function () {
                var path = (window.location.href).replace("?type=View", "");
                var newpath = path.replace("List.aspx", "Edit.aspx?type=Add");
                window.location.href = newpath;

            })
            //查询条件赋值
            jQuery("#btnSearch").click(function () {
                var url = window.location.href;
                if (url.indexOf('?') > 0)
                    url = url.split('?')[0];
             window.location.href = url + "?type=View&roleid=<%=roleid%>&" + encodeURI(jQuery("#tableoptions input,select").serialize());
            });
        });
    </script>

 

posted @ 2017-07-05 17:10  小神猪  阅读(2423)  评论(1编辑  收藏  举报