評論回復彈出遮罩效果實現(xiàn)思路兼容ie8/chrome/firefox

字號:


    平日喜歡關注一些新聞,經(jīng)常會瀏覽!
    但是很少看到評論的回復。與是仔細尋找之,發(fā)現(xiàn)原來是通過一個頁面的彈出遮罩來顯示的。
    與是仔細研究一翻,自己模擬出來一個,感覺還行,兼容ie8/chrome/firefox.
    思路:主頁面和遮罩是兩個不同的頁面,遮罩通過iframe利用js加載進來。
    代碼如下:
    index.html
    代碼如下:
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
    <head>
    <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
    <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <title>append-iframe</title>
    <styletype="text/css">
    html,body{height:100%;padding:0px;margin:0px;}
    </style>
    </head>
    <body>
    <div><inputtype="button"value="show"id="show-id"/></div>
    <div><inputtype="button"value="test"id="test-id"/></div>
    <scripttype="text/javascript">
    $("#show-id").on("click",function(){
    $(top.document.body).append('<iframesrc="subiframe.html"id="np-pop-iframe"allowtransparency="true"frameborder="0"scrolling="no"style="width:100%;z-index:9999;position:fixed;top:0px;left:0px;border:none;overflow:hidden;height:100%;"data-nick=""data-pic=""data-id=""parentid=""></iframe>');
    });
    $("#test-id").on("click",function(){
    alert("test");
    });
    </script>
    </body>
    </html>
    subiframe.html:
    代碼如下:
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
    <head>
    <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
    <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <title>Document</title>
    <styletype="text/css">
    html,body{height:100%;padding:0px;margin:0px;}
    .np-popframe-bg-opacity{
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity:0.5;
    }
    .wrapper{
    position:absolute;
    border:1pxsolidred;
    width:800px;
    height:800px;
    background:#fff;
    top:1000px;
    left:500px;
    }
    </style>
    </head>
    <bodyclass="iframe-body"style="background-image:none;width:100%;height:100%;background-position:initialinitial;background-repeat:initialinitial;">
    <divclass="np-popframe-bg-opacity"style="height:100%;width:100%;background-color:#000;"></div>
    <divclass="np-popframe-bg"id="np-popframe-bg-id"style="height:100%;width:100%;position:absolute;top:0px;left:0px;"></div>
    <divclass="wrapper"id="wrapper-id"></div>
    </body>
    <scripttype="text/javascript">
    (function(){
    $("#wrapper-id").animate({top:"100px"},"slow");
    $("#np-popframe-bg-id").on("click",function(){
    //$(window.parent.document.getElementById("np-pop-iframe")).remove();
    $("#np-pop-iframe",window.parent.document).remove();
    });
    })(jQuery);
    </script>
    </html>
    這里需要用一到濾鏡。讓加載來的遮罩保持透明.
    1np-popframe-bg-id的作用主要是顯示評論框的外部區(qū)域。當鼠標點擊該區(qū)域的時候,移除iframe.
    2div需要設置100%的高度,需要在前面加上html,body{height:100%;}的css,否則無效
    3還有一點就是絕對定位的absolute.