Question

我一直在学习twitter bootstrap，所以我尝试建立一个模型网站。问题是一旦按下登录按钮，模型对话框就不显示，有人可以建议我哪里出错吗？

body {
  padding-top: 70px;
  background: url('book.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}
.navi-logo {
  font-size: 20px;
  color: white;
}
.navi-style {
  background-color: #A0522D;
}
.navi-font {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #ffffff !important;
  font-size: 18px;
  font-weight: bold;
  padding-left: 16px;
}
.navhover li a:hover {
  background-color: rgba(221, 114, 1, .5);
}
.custom-nav-bar.navbar-toggle {
  background-color: #ffffff;
}
.custom-nav-bar.navbar-toggle .icon-bar {
  background-color: #888;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Login</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="cssfile.css" />
  <!--[if lt IE 9]>
           <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
         <![endif]-->
</head>

<body>
  <!--login model-->
  <div class="container">
    <div class="model fade" id="login" role="dialog" tab-index="-1" style="display:block">
      <div class="model-dialog">
        <div class="model-content">
          <div class="model-header">
            <button type="button" class="close" data-dismiss="modal" style="font-size:14px;">&times;</button>
            <h2 class="modal-title">Log In To Wattpad</h2>
          </div>
          <!--content closed-->
        </div>
        <!--Dialog box closed-->
      </div>
      <!--Model closed-->
    </div>
  </div>
  <nav class="navbar navbar-fixed-top navi-style">
    <div class="container-fluid">
      <div class="navbar-header">
        <!--toggle button design-->
        <button type="button" class="navbar-toggle collapsed pull-right custom-nav-bar" data-toggle="collapse" data-target="#navbarhome">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand navi-logo" href="#">wattpad</a>
      </div>
      <div class="collapse navbar-collapse" id="navbarhome">
        <ul class="nav navbar-nav navhover">
          <li class="dropdown">
            <a class="dropdown-toggle navi-font" data-toggle="dropdown" href="#">Discover <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li class="dropdown-header">Browse</li>
              <li><a href="#">Action</a>
              </li>
              <li><a href="#">Horror</a>
              </li>
              <li><a href="#">Chickflick</a>
              </li>
              <li><a href="#">TeenFiction</a>
              </li>
              <li><a href="#">Paranormal</a>
              </li>
              <li><a href="#">Fantasy</a>
              </li>
              <li><a href="#">Vampire</a>
              </li>
              <li><a href="#">Werewolf</a>
              </li>
            </ul>
          </li>
          <li><a class="navi-font" href="#">Create</a>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle navi-font" data-toggle="dropdown" href="#">Community <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Clubs</a>
              </li>
              <li><a href="#">Awards</a>
              </li>
              <li><a href="#">Contests</a>
              </li>
              <li><a href="#">#Justwriteit</a>
              </li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right navhover">
          <li><a class="navi-font" data-toggle="modal" rel="nofollow" href="#login">Login</a>
          </li>
          <li><a class="navi-font" data-toggle="modal" href="#signup">Signup</a>
          </li>
        </ul>
      </div>
    </div>
    <!--container closed-->
  </nav>
  <!--navbar closed-->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>

</html>

Answer 1

我认为它缺少CSS，因为类名是错误的。

改变这个：

with Sheets("Rotas").Columns(3)
    staffStart = .Find(What:="Staff", After:=.Cells(.Cells.Count), LookAt:=xlWhole, _
                       SearchDirection:=xlNext, MatchCase:=False).Row + 1
end with

对此：

div class="model fade" id="login" role="dialog" tab-index="-1" style="display:block">
      <div class="model-dialog">
        <div class="model-content">
          <div class="model-header">

Answer 2

你没有把data-target =＆＃34;＃login＆＃34;您的登录链接中的属性。请把这个，模式将正常工作如果遇到麻烦，了解你可以在codepen中查看

Bootstrap模型不起作用

2 个答案: