Question

我正在寻找一个更清洁的弹出窗口x。我看到很多时候将x包裹在表格外面的一个圆圈中，我喜欢它的外观。我把字母x放在我已经接近的位置，但这看起来同样糟糕，如果不是更糟。如何更改弹出窗体以添加干净的x以便能够关闭它。

我创造了一个小提琴来展示我拥有的...... https://jsfiddle.net/x9xcbmtr/

这是我的关闭按钮的当前样式。

.close {
    float: right;
    margin-right: 2px;
    color: #909090;
    text-decoration: none;
}
.close:hover{
    color: #686868;
    text-decoration: underline;
}

Answer 1

如何使用字体真棒图标？像这样：https://jsfiddle.net/x9xcbmtr/1/

<div id="light" class="signInpopup">    <a class="close" href="javascript:void(0)"><i class="fa fa-times-circle-o"></i></a>

其他x和关闭按钮/图标会查看https://fortawesome.github.io/Font-Awesome/icons/

Answer 2

如果您可以从overflow: auto移除.signInpopup，则可以在表单外部使用关闭按钮。

使用此HTML，其中❌是十字标记的Unicode字符：

<a class="close" href="javascript:void(0)">&#10060;</a>

然后按如下方式更改.close样式：

.close {
  float: right;
  transform: translateX(100%);  //takes it outside the form
  border: 1px solid gray;
  border-radius: 50%;           //creates circle
  padding: 0.4em;
  background: black;
  color: white;
  text-decoration: none;
}

Fiddle

弹出窗体有近距离x

2 个答案: