[英]Popup form to have close x
I am looking for a much cleaner popup close x. 我正在寻找一个更清洁的弹出窗口x。 I see many all of the time that has the x wrapped in a circle outside of the form and I love how that looks.
我经常看到x总是以x包裹在表格外部的圆圈中,我喜欢它的外观。 I have put the letter x in place of where I have close, but that looks just as bad, if not worse.
我已经将字母x放在我关闭的位置,但这看起来同样糟糕,甚至更糟。 How can I change my popup form to add in a clean x to be able to close it.
如何更改弹出式窗体以添加干净的x以便能够将其关闭。
I created a fiddle to show what I have.. https://jsfiddle.net/x9xcbmtr/ 我创建了一个小提琴来显示我的东西。.https ://jsfiddle.net/x9xcbmtr/
Here is the current style for my close button. 这是关闭按钮的当前样式。
.close {
float: right;
margin-right: 2px;
color: #909090;
text-decoration: none;
}
.close:hover{
color: #686868;
text-decoration: underline;
}
How about using a font awesome icon? 如何使用超棒的字体图标? like this: https://jsfiddle.net/x9xcbmtr/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>
Other x's and close buttons/icons check out https://fortawesome.github.io/Font-Awesome/icons/ 其他x和关闭按钮/图标可查看https://fortawesome.github.io/Font-Awesome/icons/
If you can remove overflow: auto
from .signInpopup
, you can have the close button outside the form. 如果您可以从
.signInpopup
删除overflow: auto
,则可以在表单外部使用关闭按钮。
Use this HTML, where ❌
使用此HTML,其中
❌
is the Unicode character for a cross mark: 是十字标记的Unicode字符:
<a class="close" href="javascript:void(0)">❌</a>
Then change your .close
styles as follows: 然后,如下更改
.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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.