부트 스트랩 모달을 드롭 다운으로

Question

<div id="lastcolumn" class="col-md-3"> 
     <ul class="nav navbar-nav pull-right"> 
      <li class="llogin"><a class="mlogin" data-target="#loginmodal" data-toggle="modal"><span class="glyphicon glyphicon-chevron-down pull-right"></span>Login</a></li> 
         <div class="modal" id="loginmodal" tabindex="-1"> 
          <div class="modal-dialog"> 
           <div class="modal-content"> 
            <div class="modal-header"> 
             <button class="close" data-dismiss="modal">&times;</button> 
            </div> 
            <div class="modal-body"> 
             <form> 
              <div class="form-group"> 
               <label for="Username">Username</label> 
               <input type="text" name="text" class="form-control"> 
              </div> 
              <div class="form-group"> 
               <label for="Password">Password</label> 
               <input type="Password" name="text" class="form-control"> 
              </div> 
             </form> 
            </div> 
            <div class="modal-footer"> 
             <button class="btn btn-primary" data-dismiss="modal">Close</button> 
            </div> 
           </div> 
          </div> 
         </div> 
      <li class="lsignup"><a class="msignup"><span class="glyphicon glyphicon-chevron-down pull-right"></span>Signup</a></li> 
      <li class="lcart"><a class="mcart"><span class="glyphicon glyphicon-shopping-cart pull-right"></span>Item</a></li> 
     </ul> 
     </div> 

    </div> 
</div> 

현재 부트 모드 모달을 로그인 아래에 표시하고 싶습니다. 내 모달이 화면 중간에 표시되어 원하는 동작을 얻으려면, 친절하게 도와야합니다. enter image description here

Answer 1

li에있는 .modal div를 모달을 첨부 할 위치로 이동하십시오. 그런 다음 li에 대해 position:relative;을 지정하고 .modal에 대해 position:absolute;을 정의하십시오.

다음은 작동중인 스 니펫입니다. .modal-backdrop을 제거하고 모달에 대한 여백과 여백을 편집했습니다. 기본 문제와 관련이 없으므로 무시할 수 있습니다.

.nav.navbar-nav li{ 
 
    float:left; 
 
} 
 
.nav.navbar-nav li a.mlogin{ 
 
    position:relative; 
 
} 
 
div.modal#loginmodal{ 
 
    position:absolute; 
 
    width:200px; 
 
    height:300px; 
 
    top:30px; 
 
    left:0; 
 
    padding:0; 
 
    margin:0; 
 
} 
 
div.modal#loginmodal .modal-footer{ 
 
    padding:5px; 
 
    margin:0; 
 
} 
 
div.modal#loginmodal .modal-body{ 
 
    padding:10px 20px; 
 
    margin:0; 
 
} 
 
div.modal#loginmodal .modal-header{ 
 
    padding:5px 20px; 
 
    margin:0; 
 
} 
 
.modal-backdrop{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div id="lastcolumn" class="col-md-3"> 
 
    <ul class="nav navbar-nav pull-right"> 
 
     <li class="llogin"><a class="mlogin" data-target="#loginmodal" data-toggle="modal"><span class="glyphicon glyphicon-chevron-down pull-right"></span>Login</a> 
 
       <div class="modal" id="loginmodal" tabindex="-1"> 
 
     <div class="modal-dialog"> 
 
      <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button class="close" data-dismiss="modal">&times;</button> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <form> 
 
       <div class="form-group"> 
 
        <label for="Username">Username</label> 
 
        <input type="text" name="text" class="form-control"> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label for="Password">Password</label> 
 
        <input type="Password" name="text" class="form-control"> 
 
       </div> 
 
       </form> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button class="btn btn-primary" data-dismiss="modal">Close</button> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    <li class="lsignup"><a class="msignup"><span class="glyphicon glyphicon-chevron-down pull-right"></span>Signup</a></li> 
 
    <li class="lcart"><a class="mcart"><span class="glyphicon glyphicon-shopping-cart pull-right"></span>Item</a></li> 
 
    </ul> 
 
</div>