彈出式表格可以關閉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;
}

小提琴