Jquery 引导模式逐渐消失，但未看到任何内容

我知道以前有人问过这个问题，我尝试过他们的所有解决方案，比如将

href=“#myModal”

更改为

data toggle=“myModal”

并删除

.hide

类。还包括bootstrap.js之前的jQuery 但是登录模式仍然不起作用。屏幕确实会褪色，但看不到表单/文本

我试图在下拉菜单中包含登录模式 这是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>


       <!--START of LOGIN MODAL-->



          <a data-toggle="modal" data-target="#myModal" >Log-In</a>
            <div class="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</a>
                  </div>
              </div>
            </div>



     <!--END OF LOGIN MODAL-->



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

切换导航








新来的？

---

提前感谢：）

将您的模式

div

移动到外部，并且您忘记了模式对话框

div

<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="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <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</a>
      </div>
    </div>
  </div>
</div>

<!--END OF LOGIN MODAL-->


切换导航












x
登录



登录

新来的？
将POC放在此处：您能告诉我为什么嵌套在
中时POC不起作用吗？来自BS docs：“始终尝试将模态的HTML代码放在文档的顶层位置，以避免其他组件影响模态的外观和/或功能。”