私は StackOverflow の新しいユーザーです。あなたの素晴らしいコミュニティの一員になることを楽しみにしています。私の質問は次のとおりです。
Web サイトで 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 を使用して Web ページを分析すると、モーダル ボックスに 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 を使用する必要がある理由は、次のとおりです。2 つ目のモーダル ボックスを追加する必要があり、サイズやフィールド サイズなどを変更したいのです。) ありがとうございます。
EDIT：（私自身のばかげた質問に答えます） コードをいじった後、次のように機能することがわかりました：
//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 を開始するには、どのような方法がありますか。とにかく、私を助けようとしてくれたみんなに感謝します。この投稿を閉じるために投票してください。