引導模態對話框關閉屏幕，白色背景

Question

我在這個片段的工作：http://bootsnipp.com/snippets/featured/modal-login-with-jquery-effects

使用自助3.3.6

兩個問題：

1. 爲什麼有我的模式後面的白色背景？或者我應該如何調試？
2. 爲什麼我的模態只能在白色背景中居中？我需要它在屏幕中間居中。

我的CSS：

/* ##################################################################### 
    # 
    # Project  : Modal Login with jQuery Effects 
    # Author  : Rodrigo Amarante (rodrigockamarante) 
    # Version  : 1.0 
    # Created  : 07/28/2015 
    # Last Change : 08/02/2015 
    # 
    ##################################################################### */ 

/*@import url(http://fonts.googleapis.com/css?family=Roboto); 

* { 
    font-family: 'Roboto', sans-serif; 
}*/ 

#login-modal .modal-dialog { 
    width: 350px; 
    position: relative; 
    top: 50%; 
    left: 50%; 
    margin-top: -25px; 
    margin-left: 0px; 
    padding: 20px; 

} 

#login-modal input[type=text], input[type=password] { 
    margin-top: 10px; 
} 

#div-login-msg, 
#div-lost-msg, 
#div-register-msg { 
    border: 1px solid #dadfe1; 
    height: 30px; 
    line-height: 28px; 
    transition: all ease-in-out 500ms; 
} 

#div-login-msg.success, 
#div-lost-msg.success, 
#div-register-msg.success { 
    border: 1px solid #68c3a3; 
    background-color: #c8f7c5; 
} 

#div-login-msg.error, 
#div-lost-msg.error, 
#div-register-msg.error { 
    border: 1px solid #eb575b; 
    background-color: #ffcad1; 
} 

#icon-login-msg, 
#icon-lost-msg, 
#icon-register-msg { 
    width: 30px; 
    float: left; 
    line-height: 28px; 
    text-align: center; 
    background-color: #dadfe1; 
    margin-right: 5px; 
    transition: all ease-in-out 500ms; 
} 

#icon-login-msg.success, 
#icon-lost-msg.success, 
#icon-register-msg.success { 
    background-color: #68c3a3 !important; 
} 

#icon-login-msg.error, 
#icon-lost-msg.error, 
#icon-register-msg.error { 
    background-color: #eb575b !important; 
} 

#img_logo { 
    max-height: 100px; 
    max-width: 100px; 
} 

/* ######################################### 
    # override the bootstrap configs  # 
    ######################################### */ 

.modal-backdrop.in { 
    filter: alpha(opacity=50); 
    opacity: .8; 
} 

.modal-content { 
    background-color: #ececec; 
    border: 1px solid #bdc3c7; 
    border-radius: 0px; 
    outline: 0; 
    margin: 15% auto; 
    position: relative; 
} 

.modal-header { 
    min-height: 16.43px; 
    padding: 15px 15px 15px 15px; 
    border-bottom: 0px; 
} 

.modal-body { 
    position: relative; 
    padding: 5px 15px 5px 15px; 
} 

.modal-footer { 
    padding: 15px 15px 15px 15px; 
    text-align: left; 
    border-top: 0px; 
} 

.checkbox { 
    margin-bottom: 0px; 
} 

.btn { 
    border-radius: 0px; 
} 

.btn:focus, 
.btn:active:focus, 
.btn.active:focus, 
.btn.focus, 
.btn:active.focus, 
.btn.active.focus { 
    outline: none; 
} 

.btn-lg, .btn-group-lg>.btn { 
    border-radius: 0px; 
} 

.btn-link { 
    padding: 5px 10px 0px 0px; 
    color: #95a5a6; 
} 

.btn-link:hover, .btn-link:focus { 
    color: #2c3e50; 
    text-decoration: none; 
} 

.glyphicon { 
    top: 0px; 
} 

.form-control { 
    border-radius: 0px; 
} 

我的HTML：

!-- BEGIN # MODAL LOGIN --> 
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header" align="center"> 
       <img class="img-circle" id="img_logo" src="images/hhb.png"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
       </button> 
      </div> 

      <!-- Begin # DIV Form --> 
      <div id="div-forms"> 

       <!-- Begin # Login Form --> 
       <form id="login-form"> 
        <div class="modal-body"> 
         <div id="div-login-msg"> 
          <div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div> 
          <span id="text-login-msg">Type in User Name and Password</span> 
         </div> 
         <input id="login_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required> 
         <input id="login_password" class="form-control" type="password" placeholder="Password" required> 
         <div class="checkbox"> 
          <label> 
           <input type="checkbox"> Remember me 
          </label> 
         </div> 
        </div> 
        <div class="modal-footer"> 
         <div> 
          <button type="submit" class="btn btn-primary btn-lg btn-block">Login</button> 
         </div> 
         <div> 
          <button id="login_lost_btn" type="button" class="btn btn-link">Lost Password?</button> 
          <button id="login_register_btn" type="button" class="btn btn-link">Register</button> 
         </div> 
        </div> 
       </form> 
       <!-- End # Login Form --> 

Answer 1

解決了這個。以下是我剛剛開始做的任何事情：

• 您可以使用開發人員工具來確定代碼中可能存在衝突的地方。
• 對我來說，我引用了兩個相互矛盾的bootstrap版本。