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

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

javascript jquery html css

Javascript 当我打开模态视图时，标题图像出现在模态的前面，如何停止？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经建立了一个功能，将打开登录模式视图时，该网站的标志是点击模态视图正确打开，但有三个元素忽略模态代码的规则两个站点徽标图像和站点菜单“当前”选项卡显示在模式上方，并且不受遮挡站点其余部分的背景不透明度的影响我试图通过设置元素的z索引来解决这个问题，使其与我希望它们出现的位置相对应，但没有效果。由于我对编码相当缺乏经验，所以我无法发现哪里可能出错 /*单击左上方的框打开modal*/ .input txt{ 宽度：100%；填充：20px 10px；背景：蓝色；边界：无；字号

我已经建立了一个功能，将打开登录模式视图时，该网站的标志是点击

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

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

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

/*单击左上方的框打开modal*/

.input txt{
宽度：100%；
填充：20px 10px；
背景：蓝色；
边界：无；
字号：1em；
颜色：白色；
边框底部：1px点状rgba（250250250.4）；
@包括框尺寸（边框框）；
@包括占位符（蓝色（$10%））；
@包括过渡色（背景色，5s易入易出）；
&：焦点{
背景色：深色（蓝色，30%）；
}
}
p{
字体大小：16px文本对齐：左；
}
h1{
字号：16px
}
/*模态的CSS*/
/*全宽输入字段*/
输入[类型=文本]，
输入[类型=密码]{
宽度：33%；
填充：12px 20px；
利润率：8px0；
显示：块；
边框：1px实心#ccc；
框大小：边框框；
对齐项目：居中；
}
/*为所有按钮设置样式*/
钮扣{
背景色：#1dacf9；
颜色：白色；
填充物：1px2px；
利润率：8px0；
边界：无；
光标：指针；
宽度：33%；
}
/*取消按钮的其他样式*/
.取消{
宽度：自动；
填充：10px 18px；
背景色：#f44336；
}
/*将图像居中并放置关闭按钮*/
.imgcontainer{
文本对齐：居中；
保证金：24px 0 12px 0；
}
化身{
宽度：40%；
边界半径：50%；
}
.集装箱{
填充：6px；
}
span.psw{
浮动：对；
填充顶部：16px；
}
/*模态（背景）*/
.莫代尔{
显示：无；
/*默认情况下隐藏*/
位置：固定；
/*原地不动*/
z指数：10；
/*坐在上面*/
左：0；
排名：0；
宽度：100%；
/*全宽*/
身高：100%；
/*全高*/
溢出：自动；
/*如果需要，启用滚动*/
背景色：rgb（0,0,0）；
/*退色*/
背景色：rgba（0,0,0,0.4）；
/*黑色w/不透明度*/
填充顶部：60px；
高度：100vh；
边界半径：20px；
}
/*模态内容/框*/
.模态内容{
背景色：#fefe；
利润率：5%自动15%自动；
/*顶部5%，底部15%，居中*/
边框：1px实心#888；
宽度：66%；
/*根据屏幕大小的不同，大小可能有所不同*/
高度：66vh；
边界半径：20px；
}
/*关闭按钮（x）*/
.结束{
位置：相对位置；
利润率：2%自动95%自动；
颜色：#000；
字体大小：35px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：红色；
光标：指针；
}
/*添加缩放动画*/
.制作动画{
-webkit动画：animatezoom 0.6s；
动画：动画空间0.6s
}
@-webkit关键帧动画库{
从{
-webkit变换：缩放（0）
}
到{
-webkit转换：缩放（1）
}
}
@关键帧动画空间{
从{
变换：缩放（0）
}
到{
变换：缩放（1）
}
}
/*更改超小屏幕上“跨度”和“取消”按钮的样式*/
@媒体屏幕和屏幕（最大宽度：300px）{
span.psw{
显示：块；
浮动：无；
}
.取消{
宽度：100%；
}
}
#头部背景{
位置：固定；
宽度：100%；
排名：0；
左：0；
高度：100vh；
z指数：-10；
}
#TWLogo{
转换：translateZ（1px）；
显示：块；
利润率最高：5%；
保证金：0自动；
光标：指针；
背景附件：固定；
填充顶部：50px；
填充底部：50px；
宽度：150px；
高度：125px；
转换：所有.2易入易出；
背景位置：中心；
z指数：-1；
}
#标志：悬停{
转换：比例（1.1）；
}
#正文{
显示：块；
保证金：0自动；
填充顶部：80px；
填充底部：50px；
宽度：355px；
高度：125px；
变换：translateZ（30px）；
背景位置：中心；
z指数：-1；
}


&时代；
用户名
密码
登录
记得我吗
忘记

只需关闭带有id头的

，它应该可以工作：

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

情态形式的结构是这样呈现的：

触发模式的按钮
模态内容
模式标题（带文本和关闭按钮）
模态体（带形式）

我希望有帮助

参考。

你的JSFIDLE链接只是链接到JSFIDLE.net（不是真正的FIDLE）@Axel谢谢我现在更改了它，这是我无法看到你在FIDLE中描述的问题的链接。@Armin如果你点击左上角的框，你会看到显示Logo的容器出现在模型顶部。这就是我的问题所在。@Andrew站在我这边，看起来不错。文本“Logo”位于灰色弹出窗口后面。即使我添加了一个图像，弹出窗口仍然在所有内容上悬停。也许我没有领会你的意思。谢谢你的回答，但当我这么做的时候，它几乎可以在Chrome上运行，只有当前的菜单选项卡显示相同的行为。但在Safari中，它的显示方式仍然与上图所示相同，我不知道是什么导致了它。你认为它可能是什么？为什么不实现引导模式？它响应迅速，几乎可以在所有主流浏览器中使用。很难说代码是怎么回事，因为您刚刚发布了代码的摘录。如果你想，我可以用bootstrap模式更新我的答案，你可以找到在你的项目中实现它的方法吗？那会很有用的，谢谢。这是我想要自己做的东西，但也许看看引导模式是如何构建的可以帮助我理解它。请看一下我的更新

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