Question

我无法使用按钮使这段代码正常工作。所有它只是弹出，我甚至无法关闭它。

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

提前致谢

Answer 1

尝试从第一个show

中删除div课程

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

Answer 2

更新2018年

这是 Bootstrap 4 的更新登录模式...

<div id="loginModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Login</h3>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <form class="form" role="form" autocomplete="off" id="formLogin" novalidate="" method="POST">
                    <div class="form-group">
                        <label for="uname1">Username</label>
                        <input type="text" class="form-control form-control-lg" name="uname1" id="uname1" required="">
                        <div class="invalid-feedback">Oops, you missed this one.</div>
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" class="form-control form-control-lg" id="pwd1" required="" autocomplete="new-password">
                        <div class="invalid-feedback">Enter your password too!</div>
                    </div>
                    <div class="custom-control custom-checkbox">
                      <input type="checkbox" class="custom-control-input" id="rememberMe">
                      <label class="custom-control-label" for="rememberMe">Remember me on this computer</label>
                    </div>
                    <div class="form-group py-2">
                        <button class="btn btn-outline-secondary btn-lg" data-dismiss="modal" aria-hidden="true">Cancel</button>
                        <button type="submit" class="btn btn-success btn-lg float-right" id="btnLogin">Login</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/EY16S4HcuM

Answer 3

尝试在第一格中将“显示”更改为“淡入淡出”。

因此它将是：

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

Bootstrap登录模式

3 个答案: