jquery - Bootstrap 模态异常行为

Question

我正在尝试在 DROPDOWN 菜单中创建一个登录模式。模态在某种程度上可以正常工作，但是 -

1. 当我点击红色区域时它不会关闭
2. 当我点击绿色区域时它会关闭

根据 bootstrap 文档，如果我单击模态区域之外的任何地方，模态应该关闭

这是 HTML

<header class = "header container-fluid  navbar navbar-fixed-top navbar-inverse">

  <div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
  </div>

   <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">            
   <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Anime</a></li>
    <li><a href="#">Manga</a></li>
    <li><a href="#">Games</a></li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li>
          <a data-toggle="modal" data-target="#myModal" >Log-In</a>

        </li>
        <li><a href="#">Sign-Up</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Watch Paralax</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</header><!-- end of header-->

<!--START of LOGIN MODAL-->

<div class = "container">
 <div class = "row">

  <div class=" col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-lg-offset-2 col-lg-8 modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-content" >
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">x</button>
                <h3>Login</h3>
          </div>
          <div class="modal-body">
              <form method="post" action='' name="login_form">
                <p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p>
                <p><input type="password" class="span3" name="passwd" placeholder="Password"></p>

                <p><button type="submit" class="btn btn-primary">Sign in</button>
                <a href="#">Forgot Password?</a>
                </p>
              </form>
          </div>
          <div class="modal-footer">New here?
            <a href="#" class="btn btn-primary">Register Now, for FREE!!!</a>
          </div>
      </div>
  </div>

</div>
</div>  
<!-- End of LOGIN MODAL -->

这是显示区域的图片

这是显示模态的图片

另外，有人可以解释一下 input 标签中的 class = span3 是什么吗？我还想单独使用 bootstrap 使 input 字段更宽。

提前致谢:)

Answer 1

尝试以下操作:

从模态中删除所有网格 Bootstrap 类。默认模态居中，不需要使用 gird 类。

  <div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
  </div>

   <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">            
   <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Anime</a></li>
    <li><a href="#">Manga</a></li>
    <li><a href="#">Games</a></li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li>
          <a data-toggle="modal" data-target="#myModal" >Log-In</a>

        </li>
        <li><a href="#">Sign-Up</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Watch Paralax</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</header><!-- end of header-->

<!--START of LOGIN MODAL-->


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">x</button>
                <h3>Login</h3>
          </div>
          <div class="modal-body">
              <form method="post" action='' name="login_form">
                <p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p>
                <p><input type="password" class="span3" name="passwd" placeholder="Password"></p>

                <p><button type="submit" class="btn btn-primary">Sign in</button>
                <a href="#">Forgot Password?</a>
                </p>
              </form>
          </div>
          <div class="modal-footer">New here?
            <a href="#" class="btn btn-primary">Register Now, for FREE!!!</a>
          </div>
      </div>
  </div>


<!-- End of LOGIN MODAL -->

https://jsfiddle.net/0tnbyLx1/