javascript - 当我打开模态视图时，标题图像出现在模态前面，如何停止？

Question

我已经设置了一个功能，该功能将在单击站点 Logo 时打开登录模态视图。

模态视图正确打开，但三个元素忽略了模态代码的规则。

两个站点 Logo 图像和站点菜单当前选项卡显示在模式上方，并且不受遮蔽站点其余部分的背景不透明度的影响。

我试图通过将元素的 z-index 设置为与我希望它们出现的位置相对应来解决这个问题，但这没有效果。由于我对编码相当缺乏经验，所以我无法发现我可能出错的地方。

/* Click the top left box to open modal */

.input-txt {
  width: 100%;
  padding: 20px 10px;
  background: $blue;
  border: none;
  font-size: 1em;
  color: white;
  border-bottom: 1px dotted rgba(250, 250, 250, .4);
  @include box-sizing(border-box);
  @include placeholder(lighten($blue, 10%));
  @include transition(background-color .5s ease-in-out);
  &: focus {
    background-color: darken($blue, 30%);
  }
}
p {
  font-size: 16px text-align: left;
}
h1 {
  font-size: 16px
}
/* CSS for modal */

/* Full-width input fields */

input[type=text],
input[type=password] {
  width: 33%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  align-items: center;
}
/* Set a style for all buttons */

button {
  background-color: #1dacf9;
  color: white;
  padding: 1px 2px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 33%;
}
/* Extra styles for the cancel button */

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}
/* Center the image and position the close button */

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}
img.avatar {
  width: 40%;
  border-radius: 50%;
}
.container {
  padding: 6px;
}
span.psw {
  float: right;
  padding-top: 16px;
}
/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 10;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  padding-top: 60px;
  height: 100vh;
  border-radius: 20px;
}
/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto;
  /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 66%;
  /* Could be more or less, depending on screen size */
  height: 66vh;
  border-radius: 20px;
}
/* The Close Button (x) */

.close {
  position: relative;
  margin: 2% auto 95% auto;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}
/* Add Zoom Animation */

.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
  from {
    -webkit-transform: scale(0)
  }
  to {
    -webkit-transform: scale(1)
  }
}
@keyframes animatezoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
/* Change styles for span and cancel button on extra small screens */

@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}
#headerBackground {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: -10;
}
#TWLogo {
  transform: translateZ(1px);
  display: block;
  margin-top: 5%;
  margin: 0 auto;
  cursor: pointer;
  background-attachment: fixed;
  padding-top: 50px;
  padding-bottom: 50px;
  width: 150px;
  height: 125px;
  transition: all .2s ease-in-out;
  background-position: center;
  z-index: -1;
}
#Logo:hover {
  transform: scale(1.1);
}
#Text {
  display: block;
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 50px;
  width: 355px;
  height: 125px;
  transform: translateZ(30px);
  background-position: center;
  z-index: -1;
}

<div id="header">

  <img id="headerBackground" src="siteImages/tiltchair.jpg">

  <img id="Logo" onclick="document.getElementById('id01').style.display='block'" align="middle" src="siteImages/final.png" alt="Logo">

  <img id="Text" align="middle" src="siteImages/TWText.png" alt="Logo">







  <div id="id01" class="modal">

    <form class="modal-content animate" action="action_page.php">
      <div class="imgcontainer">
        <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
      </div>

      <div class="container">
        <label><b>Username</b>
        </label>
        <input type="text" class="input-txt" placeholder="Enter Username" name="uname" required>

        <label><b>Password</b>
        </label>
        <input type="password" class="input-txt" placeholder="Enter Password" name="psw" required>

        <button type="submit">Login</button>
        <input type="checkbox" checked="checked">Remember me
      </div>


      <span class="psw">Forgot <a href="#">password?</a></span>

    </form>
  </div>

(请注意，我没有将图像导入 fiddle ，因为没有它们效果仍然可见)

要激活模式，请单击左上角的框。

我真的希望这里有人能看到我哪里出错了，因为这个问题已经困扰我几天了!

Answer 1

就关闭</div>带有 id header ，它应该可以工作:

<div id="header">

             <img id="headerBackground" src="siteImages/tiltchair.jpg">

             <img id="Logo" onclick="document.getElementById('id01').style.display='block'" align="middle" src="siteImages/final.png" alt="Logo">

             <img id="Text" align="middle" src="siteImages/TWText.png" alt="Logo">
 </div>

更新

这就是使用 Bootstrap 可以完成的方式。我建议你阅读 bootstrap documentation ，通过例子来充分理解它。他们的网站上有很多简单的例子，但是here您可以找到大量 Bootstrap 代码片段，您可以探索和使用它们。

在下面的示例中，我有意区分了部分代码，以便您可以轻松阅读用于创建此模态的结构。有些类(class)不言自明:modal-content, modal-header, modal-title, modal-body等等。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- <link rel="stylesheet" href="main.css"> -->
    <title>Sign in modal form</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>


    <div class="container">
      <div class="jumbotron hidden-xs hidden-sm">
        <!-- This button below will trigger modal -->
        <p><button class="btn btn-lg btn-success" data-toggle="modal" data-target="#modalOnoff">Click me!</button></p>
      </div>
   </div>



  <div class="modal fade bs-example-modal-lg" id="modalOnoff" tabindex="-1" role="dialog" aria-labelledby="lbOnoff">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="lbOnoff">Sign In</h4>
        </div>


        <div class="modal-body">
          <div class="row">

            <div class="col-md-6">

              <form action="action_page.php">
                  <div class="form-group">
                    <label><b>Username</b></label>
                    <input type="text" class="form-control"  placeholder="Enter Username" name="uname" required>
                  </div>
                  <div class="form-group">
                    <label><b>Password</b></label>
                    <input type="password" class="form-control"  placeholder="Enter Password" name="psw" required>
                  </div>
                  <div class="form-group">
                    <button class="btn btn-md btn-success btn-block" type='submit'>Login</button>
                  </div>
                  <div class="form-group">
                    <input type="checkbox" checked="checked"> Remember me
                  </div>
                  <div class="form-group">
                    <span class="psw">Forgot <a href="#">password?</a></span>
                  </div>
              </form>

            </div>

          </div>
        </div>


      </div>
    </div>
  </div>



  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

模态形式的结构，是这样呈现的:

• 触发模态的按钮
• 模态内容
• 模态标题(带有文本和关闭按钮)
• 模态正文(带表格)

希望对你有帮助

引用。 http://getbootstrap.com/javascript/#modals