彈出窗體關閉x

我正在尋找一個更乾淨的彈出關閉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; 
}

來源

2015-10-13 Paul

如何使用字體真棒圖標？像這樣：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/

來源

2015-10-13 20:58:40

謝謝。這是正常的方法嗎？我不知道jquery是否有一些內置的形式，或者是人們可以使用的，使得x在表單外。什麼是字體真棒鏈接添加到我的網頁？ – Paul

@Paul我對許多不同的東西使用字體真棒，它真的取決於他們喜歡什麼方法的設計師......我更喜歡這:) –

如果你可以從.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; 
}

Fiddle

來源

2015-10-13 21:17:29

彈出窗體關閉x

回答

相關問題