0

我正在尝试使用 prelaoder 创建灯箱..虽然我已经这样做了，但我遇到的唯一问题是灯箱背景（蒙版）在 prelaoder 之前闪烁。它仅在我们单击刷新/打开页面时第一次发生。

这是工作示例：http: //jsfiddle.net/4nQk5/2/

脚本：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(window).load(function(){
        function customOverlay(){ 

                var popupWin = $("#custom-popup-win");
                var popMargTop = ($(popupWin).height()) / 2; 
                var popMargLeft = ($(popupWin).width()) / 2; 

                $(popupWin).css({ 
                    'margin-top' : -popMargTop,
                    'margin-left' : -popMargLeft
                });

                $('#preloader').delay(3500).fadeOut('slow')

                $(".popup-window").click(function(){
                    $("#custom-overlay").fadeIn("slow");
                    $("#custom-popup-win").fadeIn("slow");
                }); 

                $("#custom-popup-win .close-button").click(function(){
                    $("#custom-overlay").fadeOut("fast");
                    $("#custom-popup-win").fadeOut("fast");
                }); 


        }

        customOverlay();

});

</script>

款式：

<style type="text/css">
* { padding: 0; margin: 0; }
body { font-family: Verdana, Geneva, sans-serif; font-size: 12px; }
#custom-overlay { width: 100%; height: 100%; background: #000; position: fixed; top: 0; right: 0; bottom: 0; left: 0; /*background:url(images/bg-repeat.png) 0 0;*/ z-index: 1000; display: none;
opacity: 0.6;
filter: alpha(opacity=60);
 }
#custom-popup-win { width: 600px; height: 400px; margin: 0 auto; background: #fff; position: fixed; top: 50%; left: 50%; z-index: 1500; box-shadow: 0 0 10px #000; /*-o-box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; -webkit-box-shadow: 0 0 10px #000; -ms-box-shadow: 0 0 10px #000;*/ display: none; }
#custom-popup-win table { margin: 20px; }
#custom-popup-win table td { width: 20%; padding: 5px 12px; }
#custom-popup-win .close-button { cursor: pointer; /*padding:5px 3px;
    background:#000;
    color:#ccc;
    text-align:center;
    font-size:13px;
    font-weight:bold;
    box-shadow:0 0 20px #777;*/
position: absolute; width: 26px; height: 26px; top: -10px; right: -10px; background-image: url(images/popup_close_btn.png); }
#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 99; }
#status { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; background-image: url(images/status.gif); background-repeat: no-repeat; background-position: center; margin: -100px 0 0 -100px; }
</style>

HTML：

<input type="button" value="Popup" class="popup-window"  />
<div id="custom-overlay"></div>
<div id="custom-popup-win">
        <div class="close-button"></div>
        <div id="preloader">
                <div id="status">&nbsp;</div>
        </div>
        <table width="90%" border="1" cellspacing="0" cellpadding="0">
                <tr>
                        <td>lorem ipsum</td>
                        <td>lorem ipsum</td>
                        <td>lorem ipsum</td>
                        <td>lorem ipsum</td>
                        <td>lorem ipsum</td>
                </tr>

        </table>
</div>
4

0 回答 0