Jquery modal 插件 x 关闭按钮部分隐藏答案

【问题标题】：Jquery modal plugin x close button partially hiddenJquery modal 插件 x 关闭按钮部分隐藏
【发布时间】：2016-10-16 11:42:27
【问题描述】：

我正在尝试jquery modal plugin，我正在按照示例进行操作。

我链接了 css 和 js，我有一个 div，其中包含一些文本，我有一个链接应该打开该 div 并显示模式。但是，模式右上角的 x 按钮被切断了。任何想法为什么？

我也在使用引导程序。

这是我的html：

<div class="container">
  <a class="content-delete" href="#overlay" rel="modal:open"> delete</a>
  <div id="overlay" style="display:none;">
      <p>Are you sure you want to delete this content?<a href="#" rel="modal:close">Close</a> or press ESC</p>
  </div>
</div>

我也有一个 js fiddle here 发生这种情况的例子。

【问题讨论】：

标签： jquery twitter-bootstrap modal-dialog

【解决方案1】：

你可以用这一行来修复：

.modal { overflow: initial; }

Bootstrap 将其覆盖为隐藏，因此将其设置为初始值。这是 jquery-modal https://github.com/kylefox/jquery-modal/issues/189 的一个已知问题

【讨论】：

【解决方案2】：

显示的 css 将关闭模式元素设置为顶部和右侧的 -ve 偏移量。

.modal a.close-modal {
    position: absolute;
    top: -12.5px;
    right: -12.5px;

您可以将它们设置为 +ve 来解决此问题

【讨论】：

我不知道 -ve 偏移量是什么。您能否发布可以修复它并解释的代码？也许是更新的小提琴？
-ve 是否定的简写。将 top 的值更改为 0，将 right 的值更改为 0，或者一个正整数，例如 10px。例如.modal a.close-modal { 位置：绝对；顶部：10px；左：10px;

【解决方案3】：

使用css calc可以更改和更新x按钮的位置：

这意味着 .modal 的固定大小：

width: 500px;
height: 90px;

相反，如果您不想要一个固定的模态，您可以在显示模态本身时在 show 方法中进行此计算（我假设）。

这样关闭按钮就可见了：

.modal a.close-modal {
        position: fixed;
        top: calc((100% - 90px - 12.5px) / 2);
        right: calc((100% - 500px - 12.5px) / 2);
        display: block;
        width: 30px;
        height: 30px;
        text-indent: -9999px;
        background: url("data:image/png;base64,iVBORw...") no-repeat 0 0;
 }

更新后的fiddle

【讨论】：

谢谢。这确实可以使关闭按钮可见，但我希望它像在this 中那样操作，其中 x 按钮不完全位于对话框内
@user3494047 我不知道这种其他方法是否会对您有所帮助。在任何情况下，如果你不能使用固定大小，你总是可以在 show 方法中进行操作。非常感谢。