我试图使模态高度与窗口高度相同。模态的高度是动态的,可以适当地扩展以适应内容,最多可达窗口高度的 90%。还想在屏幕顶部留出一些空间来显示标题。
这是我写的:
$(document).ready(function(){
$('.modal').on('shown.bs.modal', function (e) {
var modalObj = $(this).find('.modal-content');
if ($(modalObj).height() > ($(window).height()*0.8)) {
$(modalObj).height($(window).height()*0.8);
}
});
})
Run Code Online (Sandbox Code Playgroud)
问题是当我将设备从纵向切换到横向或反之亦然时,在第一次尝试模式时会获得先前模式的高度。
假设我在肖像模式下打开模态,它显示 430 像素的高度。比我关闭模态我将设备切换到横向并打开模态,它显示 430px(在纵向模式下的高度)但是如果我再次打开模态,它会得到正确的高度。
我认为当我关闭模态时,高度没有被移除。每次关闭模态或调整窗口大小时,我都必须写一些清除高度的内容。
还试过:
var callback = function () {
$('.modal').on('shown.bs.modal', function (e) {
var modalObj = $(this).find('.modal-content');
if ($(modalObj).height() > ($(window).height()*0.9)) {
$(modalObj).height($(window).height()*0.9);
}
});
};
$(document).ready(callback);
$(window).resize(callback);
Run Code Online (Sandbox Code Playgroud)