欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

一种悬浮弹窗设计

程序员文章站 2022-03-29 19:50:48
需引入:FontAwesome,用于图标效果截图: CSS:.div1 { position: absolute; right: 16px; top: 10%; z-index: 12;} .div2 { border-radius: 10px 0 0 10px; width: 25px; heig ......

需引入: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);
}
}