弹出式表格可以关闭x

Question

我正在寻找一个更清洁的弹出窗口x。 我经常看到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

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

使用此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;
}

小提琴