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

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