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()
調用失敗重新定位的覆蓋住裏面的提示。它應該是垂直和水平居中,但它停留在頁面的左上角。
問題:我做錯了什麼,那是防止覆蓋從居中?
難怪它沒有工作。我感到有點尷尬。謝謝(你的)信息! –