2014-03-03 35 views
1

我无法使此代码与按钮一起工作。它所做的只是弹出窗口,我甚至无法关闭它。Bootstrap登录模式

<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"> 

相反,你可以使用fade如果你想要一个效果时,模态弹出

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

工作[Bootply(http://www.bootply.com/118328) –

+0

作品,谢谢! – Peter