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

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

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

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

Answer 2

可以使用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

Answer 3

您可以用这一行来解决：

.modal { overflow: initial; }

Bootstrap将其覆盖为隐藏，因此将其设置为initial。这是jquery-modal https://github.com/kylefox/jquery-modal/issues/189

的一个已知问题

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

3 个答案: