比较难的一个需求，求助高手

要是跨域单靠js无法完成。需要目标网站的后台配合。
关键是你的嵌入一张网页是否是获取目标网站的所有html然后嵌入，还是只是一个链接的形式。

解决方案 »

  1.   


    html代码我可以拿到，也可以控制，这个你不需要管
    现在就是想用js去实现我的需求
      

  2.   

    添加一个半透明的层，遮盖住所有元素（用div实现的模式对话框，代码遍地都是）
    提升目标div的 css.z-index 。是指处于遮罩的前面
      

  3.   

    没啥难度。关键看目标的css中position怎么设置的<html>
    <head>
    <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>        <script>
                var oldPosition;
                var oldPosition;
                $(function(){
                    $('#trigger').bind('click',function(){
                        $mask=$('#mask-layout');
                        if($mask.length){
                            //想显示现实哪个填哪个id
                            $target=$("#mid");
                            $target.css("position",oldPosition)
                            $target.css("z-index",oldPosition)
                            $mask.remove()
                        }else{
                            //想显示现实哪个填哪个id
                        $target=$("#mid");
                            oldPosition= $target.css("position")
                            oldZindex=$target.css("z-index")
                            $target.css("position","relative")
                            $target.css("z-index",10000)
                        $("body").prepend('<div id="mask-layout" style="background-color:#000000;height:'+$(document).height()+'px;width:'+$(document).width()+'px;left:0;right:0;position:absolute;z-index:1000"></div>')
                            $('#mask-layout').css("opacity",0.5);
                        }
                    })
                    $('#mask-all').bind('click',function(){
                        $mask=$('#mask-all-layout');
                        if($mask.length){
                            $mask.remove()
                        }else{
                        $("body").prepend('<div id="mask-all-layout" style="background-color:#000000;height:'+$(document).height()+'px;width:'+$(document).width()+'px;left:0;right:0;position:absolute;z-index:8000"></div>')
                        $('#mask-all-layout').css("opacity",0.5);
                        }
                    })
                })
            </script>
            <style>
                .float{float:left;height: 200px;}
                #left{background-color: red;width: 200px }
                #mid{background-color: yellow;width: 250px}
                #right{background-color: blue;width: 300px;}
                #trigger{position:relative;z-index: 10000}
                #mask-all{position:relative;z-index: 10000}
            </style>
    </head>
    <body>
    <div >
        <div id="left" class="float">左侧</div>
        <div id="mid" class="float">中</div>
        <div id="right" class="float">右</div>
        <div style="clear: both"></div>    <button id="trigger">狠戳这里显示一个</button><button id="mask-all">猛击全遮罩</button>
        <br>（点击显示或取消遮罩）
    </div>
    </body>
            </html>
      

  4.   

    第二行
    var oldPosition;
    写重复了，改成 var oldZindex
      

  5.   


    能不能不用jquery的，用基础的js可以吗