Jquery模态插件x关闭按钮部分隐藏

Question

我正在尝试jquery modal plugin，我正在效仿这个例子。

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

我也在使用bootstrap。

这是我的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小提琴here这种情况发生的例子。

Answer 1

你可以解决这一行：

.modal { overflow: initial; }

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

Answer 2

显示的css为close-modal元素设置了顶部和右侧的-ve偏移量。

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

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

Answer 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