急,求救!!这个子窗口是如何实现的? (子窗口在父窗口上)

Question

急,求救!!请大家帮忙看看这个链接,这个子窗口是如何实现的? (子窗口在父窗口上)http://shop.usa.canon.com/webapp/wcs/stores/servlet/product_10051_10051_214039_-1

Answer 1

<style type="text/css">
.opaqueLayer{display:none;position:absolute;top:0px;left:0px;opacity:0.6;filter:alpha(opacity=60);background-color: #000000;z-Index:1000;}
</style>
<script type="text/javascript">
function getBrowserHeight() {
var intH = 0;
var intW = 0;if(typeof window.innerWidth == 'number' ) {
intH = window.innerHeight;
intW = window.innerWidth;
}
else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
intH = document.documentElement.clientHeight;
intW = document.documentElement.clientWidth;
}
else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
intH = document.body.clientHeight;
intW = document.body.clientWidth;
}
return { width: parseInt(intW), height: parseInt(intH) };
}function setLayerPosition() {
var shadow = document.getElementById('shadow');
var question = document.getElementById('question');var bws = getBrowserHeight();
shadow.style.width = bws.width + 'px';
shadow.style.height = bws.height + 'px';
question.style.left = parseInt((bws.width - 350) / 2)+ 'px';
question.style.top = parseInt((bws.height - 200) / 2)+ 'px';
shadow = null;
question = null;
}    function showLayer() {
    setLayerPosition();
    
    var shadow = document.getElementById('shadow');
    var question = document.getElementById('question');
    
    shadow.style.display = 'block';
    question.style.display = 'block';
    
    shadow = null;
    question = null;
    }
    
    function hideLayer() {
    var shadow = document.getElementById('shadow');
    var question = document.getElementById('question');
    
    shadow.style.display = 'none';
    question.style.display = 'none';
    
    shadow = null;
    question = null;
    }window.onload=function(){
  window.onresize = setLayerPosition;
}
</script>
<iframe id="shadow" class="opaqueLayer" style="border:0;" src="about:blank"></iframe>
<input type="button" value="click" onclick="showLayer();">
<div id="question" style="width:340px;height:250px;padding:0px;display:none;position:absolute;z-index:1001;background:#CCC;border:10px solid #999;">
<img width="320" height="210" src="http://shop.usa.canon.com/wcsstore/eStore/images/sx200is_black_1_xl.jpg"><br>
    <input type="button" value="关闭" onclick="hideLayer()">
</div>

Answer 2

我的理解就是一个div的显示和隐藏
<input type=button value="click me" onclick="showFloat()">
<div id="divLogin" style="border: solid 10px #898989; background: #fff; padding: 10px;
        width: 800px; z-index: 1001; position: absolute; display: none; top: 50%; left: 50%;
        margin: -200px 0 0 -400px;">
        <div style="padding: 3px 15px 3px 15px; text-align: left; vertical-align: middle;">
            这里放图片
            <br />
            <div>                
                <input id="BttCancel" type="button" value=" 取 消 " onclick="ShowNo()" class="BigButton" />
            </div>
        </div>
    </div>
    <input type="hidden" id="pagestate" runat="server" />
    </form>    <script>
        function thisclick(id) {
            document.getElementById("cuee").value = id;
        }
        function ShowNo() {
             document.getElementById("divLogin").style.display="none";          
        }
      
        function showFloat() {
              document.getElementById("divLogin").style.display="";           
        }
        
    </script>放图片的地方放个IMG控件,加个hidden控件来获取图片的路径,然后再在IMG显示就行了