html - 出现弹出窗口模态，但无法正常工作。它不活跃

Question

我正在尝试创建一个弹出窗口模式。模态出现但无法正常工作。

截图如下:

这是以下模态的 HTML 代码:

<span class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#editCard-modal"></span>

<div class="modal fade" id="editCard-modal" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;">
   <div class="modal-dialog">
      <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal">&times;</button>
         <h4 class="modal-title">Modal Header</h4>
      </div>

      <div class="modal-body">
         Description here
      </div>

      <div class="modal-footer" id="outerCard">
         <div class="innerCard"><button type="submit" class="addTemplateButton">Save</button></div>
         <div class="innerCard"><button type="submit" class="deleteCardButton">Delete</button></div>
      </div>
   </div>
</div> <!--end of pop up window-->

这是CSS代码:

/* Modal css for edit card */
#editCard-modal .modal-dialog
{
   border:3px solid #000000;
   border-radius:10px;
   background-color:#ECF0F1;
   padding: 10px;
}

/*display button in 1 line*/
#outerCard
{
   width:100%;
   text-align: right;
}
.innerCard
{
   display: inline-block;
}

类说明:

1. 'addTemplateButton' 和 'deleteCardButton' 只是用于自定义按钮的 CSS。
2. 'innerCard' 和 'outterCard' 用于在 1 行中显示按钮。
3. editCard-modal 用于自定义模态弹出窗口。

正如您在图片中看到的，整个页面看起来都褪色了，我无法点击模态中的任何按钮。

此外，我什至无法关闭模式。通常，如果我点击页面的其余部分，模式会自动关闭。现在，它没有关闭。

我目前正在设计一个网站。在另一页上，它可以正常工作，没有任何问题。但是，在这个特定页面中，它没有。

请帮助我，在此先感谢。

Answer 1

在拼命地“相当”地寻找答案之后，我找到了答案。

看起来通过移动模态代码使其工作。我已将代码移至“/container”标签或“/body”标签后的右下方。

有关更多引用，请参阅此链接: Bootstrap modal appearing under background