gpt4 book ai didi

jquery - 调整窗口大小时获取模态动态调整大小

转载 作者:行者123 更新时间:2023-12-01 06:53:09 25 4
gpt4 key购买 nike

我已经设法让我的 Block UI 模式死点,但现在的问题是,当窗口调整大小(变小或变大)时,模态(以及周围的叠加层)不会动态调整大小。有没有办法使用 jQuery 来实现这一点?这是我到目前为止所做的:http://jsfiddle.net/2dpc7/ 。如果您尝试拖动“结果” Pane ,那么您会发现模式并没有真正动态调整以适应。这是为什么?

HTML

<div style="float: left;">
<a id="about" class="windowClass" href="#">About</a>&nbsp;&middot;
<a id="terms" class="windowClass" href="#">Terms</a>&nbsp;&middot;
<a id="privacy" class="windowClass" href="#">Privacy</a>&nbsp;&middot;
<a id="language" class="windowClass" href="#">Language: English</a>
</div>
<div id="register_win" class="modal">
<span class="modal_header">Register</span>
<div class="modal_close">
<img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="register_close">
</div>
</div>
<div id="about_win" class="modal">
<span class="modal_header">About</span>
<div class="modal_close">
<img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="about_close">
</div>
</div>
<div id="terms_win" class="modal">
<span class="modal_header">Terms</span>
<div class="modal_close">
<img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="terms_close">
</div>
</div>
<div id="privacy_win" class="modal">
<span class="modal_header">Privacy</span>
<div class="modal_close">
<img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="privacy_close">
</div>
</div>
<div id="forgotpwd_win" class="modal">
<span class="modal_header">Forgotten your password?</span>
<div class="modal_close">
<img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="forgotpwd_close">
</div>
</div>
<div id="language_win" class="modal">
<span class="modal_header">Language</span>
<div class="modal_close">
<img src="http://www.ezpz.co.za/assets/close-button-25f4a789916c34b8c927d7d0ec98410b.gif" id="language_close">
</div>
</div>

CSS

.modal {
display: none;
padding: 10px;
cursor: default;
}
.modal_header {
font-family: Verdana, Geneva, sans-serif;
float: left;
}
.modal_close {
cursor: pointer;
float: right;
}​

JS

$(document).ready(function () {

$('.windowClass').click(function () { // <-- bind to all window elements with that class
$.blockUI({
message: $('#' + this.id + '_win'),
css: {
top: ($(window).height() - 200) /2 + 'px',
left: ($(window).width() - 200) /2 + 'px',
width: '200px'
}
});
});

$('[id$=_close]').click(function () { //<-- gets all elements with id's that end with close
$.unblockUI();
return false;
});

});​

最佳答案

window.resize 事件中,您可以重新定位元素:

$(window).on('resize', function () {
$('body').children('.blockMsg').css({
top : ($(window).height() - 40) /2 + 'px',
left : ($(window).width() - 200) /2 + 'px'
});
});​

这是一个演示:http://jsfiddle.net/2dpc7/2/

这将找到任何当前的 blockUI 模式并更新其 top/left CSS 属性以使其保持居中。

关于jquery - 调整窗口大小时获取模态动态调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11749070/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com