Question

我正在使用Bootstrap Modal，我希望模式在大型桌面上的宽度为750px。当我调整窗口大小并使其变小时，模态不再响应，因此我向模态添加了一个类并给它750px宽度，当窗口小于800时我删除了这个类。问题是一旦上课被删除，它仍然被删除，所以当窗口大于800时，如何再次添加该类？到目前为止我有这个

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

}

$(window).resize(checkWidth);

Answer 1

您可以使用CSS media queries执行此操作，而不是使用JavaScript：

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

此规则仅在浏览器宽度为800px或更高时才会应用。

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

我没有正确地回答您的问题，但是对于响应模式，将“模态范围”添加到主模式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

我希望这对你有用。

在窗口大小调整

5 个答案: