Question

我是StackOverflow的新用户。期待成为您精彩社区的一员。我的问题如下：

我想在我的网站上使用Twitter Bootstrap模式框。但是，我遇到了让CSS在模态框上工作的问题。我写了以下HTML代码：

<div id="playModal" class="modal hide fade">
<div class="modal-header">  
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <span class="login"><strong>Login</strong></span>
</div>  
<div class="modal-body">  
    <form class="form-horizontal" accept-charset="utf-8" method="post" action="#">
        <fieldset>
            <div class="control-group">
                <label class="control-label" for="play_form_username">Username</label>
                <div class="controls">  
                    <input type="text" id="play_form_username" name="username" placeholder="Enter your username" required />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="play_form_password">Password</label>
                <div class="controls">  
                    <input type="password" id="play_form_password" name="password" placeholder="Enter your password" required />
                </div>
            </div>                  
        </fieldset> 
        <span><a href="#">Forgot your password?</a></span>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Play!</button>
        </div>
    </form>
</div>  
<div class="modal-footer">  
    <span>Not a member yet? <a href="#registerModal" role="button" data-toggle="modal" data-backdrop="static">Join Now!</a></span>
    <!--need to find a way to get this modal box to disappear if registerModal is called-->
</div>  
</div>

接下来，我想配置页面的设计。我正在使用LESS来编写通过SIMPLESS转换为CSS的代码。我尝试通过以下LESS代码中的模态div ID传递我想要的CSS配置：

#playModal{
width: 300px;
.modal-backdrop,
.modal-backdrop.fade.in{
    opacity: 1;
    filter: alpha(opacity=100);
}
.modal-header{
    .login{
        font-family: arial;
        font-size: 60px;
        font-weight: bolder;
    }
}
.modal-body{
    max-height: 200px;
}
}

这成功编译成CSS，但是当我使用Firebug分析网页时，似乎 没有为模式框传递任何CSS 。相反，如果我使用类传递CSS配置，类似于以下，它可以工作。

.modal{
width: 315px;
margin-left: 0px;
left: 50%;
top: 58px;
.modal-header{
    padding: 7px 15px;
    .login{
        color: #203665;
        font-size: 20px;
        font-weight: bolder;
        line-height: 24px;

    }
}
}

为什么在通过ID引用模式框时不会传递CSS规则？不是ID比班级更具体吗？注意：即使我在使用ID的代码上使用！important，它也不起作用。

如果有人可以帮助我，我将非常感激 - 尽管可能是因为我做了一些愚蠢的事情。（我需要使用ID而不仅仅是类的上下文是：我需要添加第二个模态框，我希望它具有不同的大小，字段大小等。）谢谢。

编辑:(回答我自己的愚蠢问题） 在涉及代码之后，我发现以下工作：

//Settings for all models
.modal-backdrop.fade.in{
opacity: 0.9!important;
filter: alpha(opacity=90)!important;
}

//Settings for playModal
#playModal{
width: 315px;
margin-left: 0px;
left: 50%;
top: 58px;
.modal-header{
    padding: 7px 15px;
    .login{
        color: #203665;
        font-size: 20px;
        font-weight: bolder;
        line-height: 24px;

    }
}
.modal-body{
    padding: 10px;
    .control-group{
        margin-bottom: 10px;
        .control-label{
            width: 65px;
            text-align: left;
        }
        .controls{
            margin-left: 75px;
        }
    }
    span a{
        display: block;
        margin-top: 0px;
        padding-top: 15px;
        float: left;
        &:hover{
            text-decoration: none;
        }
    }
    .form-actions{
        display: block;
        float: right;
        margin: 0px;
        padding: 0px;
        border: 0px;
        background-color: #FFFFFF;
        .btn{
            font-size: 18px;
            line-height: 24px;
        }
    }
}
.modal-footer{
    padding: 7px!important;
}
}

我认为我做错了是将.modal-backdrop.fade.in放在#playModal中，现在我明白了.modal-backdrop.fade-in将指的是 < #playModal div的em> outside 。

总而言之，这只是一个微不足道的错误让我工作了这么多个小时。很抱歉浪费每个人的时间。从StackOverflow开始是一种什么样的方式。但无论如何，谢谢大家试图帮助我。请投票关闭这篇文章。

Answer 1

您使用了错误的案例。

您为元素提供了ID playModal

您的css是指#playmodal

Css区分大小写。

通过ID将CSS（通过LESS）应用于模态框不起作用

1 个答案: