[英]Changing Height and width of modal dynamically when browser screen resolution changes
我正在研究一个jquery简单模态。 我正在尝试加载它 - 在15秒后它会自动关闭。 所以我无法实现的是,如果我正在为该模态设置宽度和高度,并且如果用户浏览器屏幕分辨率发生变化([ ctrl(+)
]或[ ctrl(-)
]),则模态的大小会有所不同。 因此,我尝试使用screen.width
和screen.height
捕获用户的屏幕分辨率,并将该宽度分配给该模态。 但它搞砸了我不知道为什么。 这是我想要做的演示链接 。 这是我正在使用的jquery代码。
<script>
$(document).ready(function() {
(function () {
var width = screen.width,
height = screen.height;
setInterval(function () {
if (screen.width !== width || screen.height !== height) {
width = screen.width;
height = screen.height;
$(window).trigger('resolutionchange');
}
}, 50);
}());
$.modal($("#basic-modal-content"));
$("#simplemodal-container").width(screen.width);
$("#simplemodal-container").height(screen.height);
});
setTimeout(function() {
$.modal.close();
}, 15000);
</script>
实际的是我试图隐藏我的屏幕并在模式中放置广告,直到页面加载。 希望我的问题很明确。 先感谢您 !!
<script>
$(document).ready(function() {
(function () {
var width = screen.width,
height = screen.height;
setInterval(function () {
if (screen.width !== width || screen.height !== height) {
width = screen.width;
height = screen.height;
$(window).trigger('resolutionchange', width, height);
}
}, 50);
}());
$.modal($("#basic-modal-content"));
$("#simplemodal-container").width(screen.width);
$("#simplemodal-container").height(screen.height);
});
$(window).on('resolutionchange', function(width, height){
$("#simplemodal-container").width(width);
$("#simplemodal-container").height(height);
//you also need to set position left:0 and top:0;
});
setTimeout(function() {
$.modal.close();
}, 15000);
</script>
但我建议使用这种方式,因为你想填充浏览器窗口
#simplemodal-container {
left:0;
top:0;
width:100%;
height:100%;
position:fixed;
}
<script type="text/javascript">
setTimeout(function(){
$('#simplemodal-container').fadeOut();
},1500);
</script>
或以其他方式[您的解决方案]:
<script>
$(function() {
var width = screen.width,
height = screen.height;
$.modal($("#basic-modal-content"));
$("#simplemodal-container").width(width).height(height).css({top:0,left:0});
$(window).resize(function(){
width = screen.width;
height = screen.height;
$(window).trigger('resolutionchange', width, height);
});
$(window).on('resolutionchange', function(width, height){
$("#simplemodal-container").width(width).height(height).css({top:0,left:0});
//if you have padding for modal, remove it
});
setTimeout(function() {
$.modal.close();
}, 15000);
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.