资讯专栏INFORMATION COLUMN

一种悬浮弹窗设计

CoyPan / 2127人阅读

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







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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1715.html

相关文章

  • 重写GridView实现仿今日头条的频道编辑页(1)

    摘要:但由于这里仅仅是实现一个,因此存储功能仅通过一个单例类来模拟实现。 本文旨在通过重写GridView,配合系统弹窗实现仿今日头条的频道编辑页面 注:由于代码稍长,本文仅列出关键部分,完整工程请参见【https://github.com/G9YH/YHChannelEdit】 在开始讲解盗版的实现方案前,让我们先来看看正版与盗版的实际使用效果对比,首先是正版 showImg(https:...

    张宪坤 评论0 收藏0
  • 个人小程序笔记 - 持续收录自己一年的小程序开发注意事项

    摘要:记录小程序常见问题组件标签问题表单页面经常遇到和表现出来的边距不同问题自带多端不统一注意和与的会有不自动弹起还有,之间的表现形式结合组件标签处理正常隐藏显示自动聚焦位置错乱穿透弹窗或遮罩层尽可能说服产品和在长表单页面中最好不要如下 记录小程序常见问题 组件(标签)问题 textarea 表单页面经常遇到ios和andriod表现出来的边距不同问题 Q: textarea自带paddin...

    ruicbAndroid 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<