相关疑难解决方法(0)

根据窗口高度引导模态高度

我试图使模态高度与窗口高度相同。模态的高度是动态的,可以适当地扩展以适应内容,最多可达窗口高度的 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)

html javascript css jquery twitter-bootstrap

4
推荐指数
1
解决办法
5770
查看次数

标签 统计

css ×1

html ×1

javascript ×1

jquery ×1

twitter-bootstrap ×1