一种简洁的悬浮弹窗设计
发布在前端全栈2018年10月16日view:745css3HTMLJavaScript
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

需引入:FontAwesome,用于图标 效果截图:

 

 

CSS:

.div1 {
position: absolute;
right: 16px;
top: 10%;
z-index: 12;
}
.div2 {
border-radius: 10px 0 0 10px;
width: 25px;
height: 25px;
float: left;
cursor: pointer;
background-color: rgb(0, 198, 255);
}
.div2>i {
font-size: 22px;
margin-left: 10%;
margin-top: 5%;
}
.div3 {
height: 56px;
width: 172px;
padding-top: 3px;
padding-left: 3px;
padding-right: 3px;
padding-bottom: 3px;
float: left;
background-color: white;
border: 1px solid rgb(0, 198, 255)
}

HTML

<div id="div1" class="div1">
<div id="div2" class="div2" onclick="test()">
<i class="fa fa-question-circle"></i>
</div>
<div id="div3" class="div3" hidden="true">
<label style="font-weight: normal;font-size: 10px"></label>
</div>
</div>

JS

function test() {
if ($("#div3").is(":hidden")) {
$("#div3").show(300);
} else {
$("#div3").hide(300);
}
}

如果你觉得不错,或者发现文章中的错误,或者有更好的建议,欢迎评论或进前端全栈群:866109386,来交流讨论吹水

评论
发表评论
暂无评论
PUBLISHED IN
前端全栈

不定时推送有价值,干货的前端文章

我的收藏