2013-04-01 93 views
1

對於我正在處理的應用程序,我最近實現了一個可以吸收用戶輸入的覆蓋。當然,這只是我的目標之一 - 我還需要將居住在這個疊加層內的popover居中。jQuery .css()不影響div

這裏是到目前爲止我的設置:

標記

<!-- snip extra HTML --> 

<div id='some-overlay' class='input-eater hidden'> 
    <div id='some-prompt' class='overlay dialogue'> 
    This is a message that should be hidden.<br /><br /> 
    <a href='javascript: $('#some-overlay').fadeOut();'>Click Here To Close</a> 
    </div> 
</div> 

<!-- ...SNIP... --> 

...背景頁上的一些動作引起#some-overlay淡入,因而直至收盤動作發生堵塞的頁面。這是有問題的JavaScript:

<!-- ...Continued from the markup above... --> 
<script> 
var $button = $('.some-element'), 
    $overlay = $('#some-overlay'), 
    $prompt = $('#some-prompt'); 

$(document).ready(function() { 
    $button.click(function(e) { 
    e.preventDefault(); 

    var args = { 
     // ...snip. Unnecessary. 
    }; 

    $.get('Home/SomeAction', args, function(result) { 
     // Some processing... 

     // !!!! This is the failing code... !!!! 
     $prompt.css({ 
     'left': (window.width - $prompt.width())/2, 
     'top': (window.height - $prompt.height())/2 
     }); 
    }); 
    }); 
}); 
</script> 

造型

.input-eater { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0, 0.5); 
} 

.overlay { 
    position: absolute; 
    z-index: 1; 
} 

.dialogue { 
    box-sizing: border-box; 
    // Other platform-specific variants also included. 
    // Cosmetic attributes such as box-shadow, background color, etc. also set. 
} 

如上腳本部分提到的,$.css()調用失敗重新定位的覆蓋住裏面的提示。它應該是垂直和水平居中,但它停留在頁面的左上角。

問題:我做錯了什麼,那是防止覆蓋從居中?

回答

5

沒有window.widthheight。幸運的是,您可以使用$(window).width()$(window).height()

+0

難怪它沒有工作。我感到有點尷尬。謝謝(你的)信息! –