2014-03-03 16 views
1

이 코드를 버튼으로 작동시키는 데 문제가 있습니다. 모든 것은 단지 팝업이고 나는 그것을 닫을조차 수 없습니다.부트 스트랩 로그인 모달

<div id="loginModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h1 class="text-center">Login</h1> 
    </div> 
    <div class="modal-body"> 
     <form class="form col-md-12 center-block"> 
     <div class="form-group"> 
      <input type="text" class="form-control input-lg" placeholder="Email"> 
     </div> 
     <div class="form-group"> 
      <input type="password" class="form-control input-lg" placeholder="Password"> 
     </div> 
     <div class="form-group"> 
      <button class="btn btn-primary btn-lg btn-block">Sign In</button> 
      <span class="pull-right"><a href="#">Register</a></span><span><a href="#">Need help?</a></span> 
     </div> 
     </form> 
    </div> 
    <div class="modal-footer"> 
    <div class="col-md-12"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> 
    </div>  
    </div> 
    </div> 
    </div> 
    </div> 

버튼이 있습니다 : 사전에

<p align="center"><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#loginModal"> Login</button> <!-- Modal --> 


감사

답변

4

첫 번째 div에서 show 클래스를 제거하십시오 :

<div id="loginModal" class="modal" tabindex="-1" role="dialog" aria-hidden="true"> 

대신,을 사용할 수 있습니다모달이

을 팝업 때 효과를 원하는 경우
<div id="loginModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> 
+1

작업 [Bootply] (http://www.bootply.com/118328) –

+0

작품, 감사합니다! – Peter