Question

我有下面的代码对话框是正确打开但我无法正确看到模态。我将z-index应用于box但不影响。请参阅随附的屏幕截图，您将更好地了解我的问题。请帮忙谢谢。

$(document).ready(function(){
  $( "#new_attachment_div" ).dialog({ autoOpen: false });
  $("#register").click(function(){
    $( "#new_attachment_div" ).dialog({
      autoOpen: true,
      draggable: false,
      resizable: false,
      position: 'center',
      height: 'auto',
      width: '60%',
      modal: true,
      title: "New Attachment Type",
      position: {
        my: "center",
        at: "center",
        of: window
      }
    });
  });
});

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="new_attachment_div">
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
  <p>Hellow</p>
</div>

Answer 1

当您说您尝试z-index时，我必须询问您使用的数字有多高。您应该使用浏览器检查器来确定这些社交按钮或其父项的z-index，并给出比这更大的模态。

另一个可能的原因是，如果您的模态HTML不是<body>标记的根，就像示例代码一样，在这种情况下，您可能不得不移动它。

Answer 2

尝试将position: relative添加到对话框中。您需要设置position属性才能使z-index生效。

jQuery模式无法正常工作

2 个答案: