Bootstrap 模态背景不覆盖按钮和字段

Question

我正在使用mysql和php，我只为用户创建了一个单页user.php，其中中心<div>的内容每次点击同一页面上的任何链接时都会通过php更新。如果我不清楚，当用户单击 user.php 中侧栏中的链接时，会随页面链接发送特定变量，例如 user.php?form，然后如果 form 不为空，则中心 <div>带来形式展示。这很好用，但是对于某些链接，我没有使用这种方法，而是使用了模态。当特定变量不为空时，php调用一个函数modal()，在另一个methods.php文件中声明，modal根据通过函数调用传递的参数带来所需的内容，除了modal的背景之外，一切都很好，首先它是模态内容，但是在我设置它的z-index:-1 之后它回到了后面，但是模态后面的一些内容不在背景下，比如按钮、标题、输入字段的亮度与模态相同。我搜索了它，并找到了“将模式附加到正文”解决方案，但我的模式不在我的页面上，它是通过 php.ini 从单独的文件中调用的。我只希望背景能够像它应该的那样覆盖所有元素。模态截图附here。

我的 user.php 文件，它根据特定变量调用 modal

<div class="col-sm-10" style="padding-right: 0px;padding-left: 0px;">
<?php
$result2 = mysql_query("select * from users where username = '$username'")
or die("failed to query database".mysql_error());
$row2 = mysql_fetch_array($result2);
    if(isset($_GET['pwd']) && !isset($_GET['done']))
    {
      $userId=$row2['Id'];
      $value=4;
      $s=4;
      modal($value,$userId,$s);
    }
    if(isset($_GET['noti']))
    {
      $_SESSION['visited']=true;
      notific($username);
    }
    else if(isset($_GET['home']))
    {
      home();
    }
    else if(isset($_GET['about']))
    {
      about();
    }
    else if(isset($_GET['contact']))
    {
      contact();
    }
    else
      submitForm(0);
    ?>
</div>

还有包含模态声明的methods.php文件，user.php文件只为pwd调用模态，但我在用户以外的面板中使用了相同的modal()函数，这解释了模态体中的常量值检查。

function modal($value,$idnum,$s)
    {
        echo  '<script>
                    $(function() {
                     $("#myModal").modal("show");
                    });
                </script>
                <div class="modal fade" id="myModal" role="dialog"    >
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">';
                        if($s==1 || $s==2)
                          echo 'Closing Details';
                        else if($s==4)
                          echo 'Edit Account';
                        else if($s==3)
                          echo 'Confirm?';
                        else if($s==5)
                          echo 'Add New Case';
                        echo '</h4>
                            </div>
                            <div class="modal-body">
                                <div class="fetched-data clearfix">';
                          if($s==6)
                            addCr();
                          else if($s==5)
                            submitForm(1);
                          else if($s==4)
                            pwdChange($idnum,$value);
                                else if($s==2)                              
                                        display($idnum);
                                    else if($s==1)
                                        form($idnum);
                                echo'</div> 
                            </div>
                        </div>
                    </div>
                </div>';
        if($value==1)
            allRecords();
    else if($value==2 || $s==6)
      criminals();
        else if($s!=4 && $s!=5)
            oneRecord($value);
    else if($s==5)
      allRecords();
    }

我似乎找不到导致这种情况的原因，我什至尝试将输入字段的 z-index 设置为负数，但没有任何变化。 附言我知道我不是“应该”使用 mysql，所以暂时不要给我这个建议，感谢任何帮助，谢谢

Answer 1

HTML 和底层 CSS 输出有助于更好地理解问题。 但是，我创建了一个 codepen 供您参考。 https://codepen.io/mburnette/pen/bVWaOO

模态被定义为

.modal{
  position: fixed;
  z-index: 1050;
}

除非放置 z-index > 1050 的非静态定位元素，否则应该没有问题。我还看到模态对话框没有居中对齐。我假设 .modal 的 CSS 已在 CSS 中的某处被覆盖。