1

我是 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 分析网页时，似乎没有为 modal box 传递任何 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之外的区域。

所以总而言之，这只是一个小错误让我工作了这么多小时。很抱歉浪费大家的时间。从 StackOverflow 开始的方式是什么。但无论如何，感谢大家试图帮助我。请投票关闭此帖子。

4

1 回答 1

1

您使用了错误的案例。

你给元素一个id，playModal

你的CSS是指#playmodal

Css 区分大小写。

于 2013-03-13T10:55:52.233 回答