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

Question

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

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

这两个站点徽标图像和站点菜单的当前选项卡显示在模式上方，而不受背景不透明性影响，该不透明性使站点的其余部分着色。

我试图通过设置元素的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> 

（请注意，我没有将图片导入小提琴，因为没有它们的影响仍然可见）

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

我确实希望这里的人可以看到我要去哪里了，因为这个问题困扰了我几天了！

Answer 1

只需用id标头关闭</div> ，它应该可以工作：

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

UPDATE

这是可以通过使用引导程序来完成的。 我建议您阅读引导程序文档 ，以通过示例充分了解它。 他们的网站上有很多简单的示例，但是在这里您可以找到大量的引导代码段，可以进行探索和使用。

在下面的示例中，我故意区分了部分代码，以便您可以轻松阅读用于创建此模式的结构。 一些类会自己说： 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>

模态形式的结构如下所示：

• 按钮触发模态
• 模态含量
• 模态标题（带有文本和关闭按钮）
• 模态主体（形式）

希望对您有所帮助

REF。 http://getbootstrap.com/javascript/#modals