zoukankan      html  css  js  c++  java
  • 嵌套 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=" 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;  100%; height: 100%;">
    </div>
    //显示内容
    <div id="msgs" style="position: fixed; display: none; z-index: 99; padding: 10px;  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;  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>
  • 相关阅读:
    docker 镜像导入导出[转]
    部署coredns
    构建docker私有库
    怎么安装Docker CE 17( Centos 7)
    [转]使用tcpdump抓取HTTP包
    VLOOKUP函数使用
    有趣:256个class选择器可以干掉1个id选择器——张鑫旭
    算警示吧——此文来自张鑫旭(说说CSS学习中的瓶颈)
    不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭
    CSS中width和height与盒子模型的关系
  • 原文地址:https://www.cnblogs.com/lovable/p/7122411.html
Copyright © 2011-2022 走看看