Jquery 在调整窗口大小时删除和添加类_Jquery_Css_Bootstrap Modal

Jquery 在调整窗口大小时删除和添加类

jquery css

Jquery 在调整窗口大小时删除和添加类,jquery,css,bootstrap-modal,Jquery,Css,Bootstrap Modal,我使用的是引导模式，我希望模式在大型桌面上具有750px的宽度。当我调整窗口大小并使其变小时，模态不再响应，因此我向模态添加了一个类，并将其宽度设为750px，当窗口小于800时，我将删除该类。问题是，一旦该类被删除，它仍然会被删除，那么当窗口大于800时，如何再次添加该类？到目前为止，我有这个 function checkWidth() { if ($(window).width() < 800) { $('div').removeClass('modal-width');

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

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

}

$(window).resize(checkWidth);

函数checkWidth（）{
如果（$（窗口）.width（）<800）{
$（'div'）.removeClass（'modal-width'）；
}
}
$（窗口）。调整大小（选中宽度）；

除了使用

JavaScript

之外，您还可以使用：

此规则仅在浏览器宽度为800px或更大时适用。

使用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');
    }
}


.模态宽度
{
背景颜色：蓝色；
宽度：400px；高度：400px；
显示：块；
}
函数chClass（）{
var dd=document.getElementById（'div'）；
如果（窗口内部宽度
如果您坚持不使用，以下方法将起作用
function checkWidth() {
    if ($(window).width() < 800)
        $('div').removeClass('modal-width');
    else
        $('div').addClass('modal-width');
}

$(window).resize(checkWidth);

函数checkWidth（）{
如果（$（窗口）.width（）<800）
$（'div'）.removeClass（'modal-width'）；
其他的
$（'div'）.addClass（'modal-width'）；
}
$（窗口）。调整大小（选中宽度）；
使用以下代码
$(function() {
    $(window).bind("load resize", function() {
        if ($(this).width() < 800) {
            $('body').addClass('modal-width')
        } else {
            $('body').removeClass('modal-width')
        }
    })
})

$（函数（）{
$（窗口）.bind（“加载调整大小”，函数（）{
if（$（this）.width（）<800）{
$（'body'）.addClass（'modal-width'））
}否则{
$（'body'）.removeClass（'modal-width'））
}
})
})
我没有正确理解您的问题，但对于响应模态，请在主模态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>



示例：
我希望这对您有用。您知道媒体查询吗？媒体查询可以删除并添加类吗？：）不知道为什么我没有想到这一点
<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>