在 window 调整大小时移除并添加 class

Question

我正在使用 Bootstrap 模态框，我希望模态框在大型桌面上的宽度为 750 像素。当我调整 window 的大小并使其变小时，模态不再响应，因此我在模态中添加了一个 class 并给它 750px 宽度，当 window 小于 800。问题是一旦 class 被删除，它仍然被删除，那么当 window 大于 800 时，如何再次添加 class ？到目前为止我有这个

function checkWidth() {
  if ($(window).width() < 800) {
    $('div').removeClass('modal-width');
  }

}

$(window).resize(checkWidth);

Answer 1

除了使用 JavaScript 你也可以使用 CSS media queries:

@media screen and (min-device-width: 800px){
  .modal{
      width: 750px;
   }
}

此规则仅在浏览器宽度为 800 像素或更大时应用。

Answer 2

在 css 中使用 @media 或 javascript。

有代码：

<body onresize="chClass();">
    <div id="div" class="modal-width">
    </div>
</body>

.modal-width
{
 background-color:blue;
    width:400px; height:400px;
    display:block;
}

function chClass() {
    var dd=document.getElementById('div');
    if(window.innerWidth<300) {
        dd.removeAttribute('class');
    } else {
        dd.setAttribute('class','modal-width');
    }
}

看这个jsfiddle example

Answer 3

DEMO

如果您坚持不使用 media queries，下面的方法会奏效。

function checkWidth() {
    if ($(window).width() < 800)
        $('div').removeClass('modal-width');
    else
        $('div').addClass('modal-width');
}

$(window).resize(checkWidth);

Answer 4

使用下面的代码

$(function() {
    $(window).bind("load resize", function() {
        if ($(this).width() < 800) {
            $('body').addClass('modal-width')
        } else {
            $('body').removeClass('modal-width')
        }
    })
})

Answer 5

我没有正确理解你的问题，但是对于响应式模态，将 "modal-wide" 添加到主模态 div，并调整 CSS 中的宽度。在这个例子中，我使用了 90%。由于我使用 jQuery 来根据浏览器尺寸设置内容区域的最大高度，因此模态窗口将只达到需要的高度，并在需要时提供滚动条。

如果您想调整它的大小，只需更改 css 参数即可。

<a data-toggle="modal" href="#normalModal" class="btn btn-default">Normal</a>

<a data-toggle="modal" href="#tallModal" class="btn btn-primary">Wide, Tall Content</a>

<a data-toggle="modal" href="#shortModal" class="btn btn-primary">Wide, Short Content</a>

<div id="normalModal" class="modal fade"></div>
<div id="tallModal" class="modal modal-wide fade"></div>
<div id="shortModal" class="modal modal-wide fade"></div>

示例： jsFiddle

我希望这对你有用。

在 window 调整大小时移除并添加 class

remove and add class on window resize

css

jquery

bootstrap-modal