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

Question

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

模态定义为

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

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