资讯专栏INFORMATION COLUMN

一种悬浮弹窗设计

CoyPan / 1940人阅读

需引入: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
  • 重写GridView实现仿今日头条的频道编辑页(1)

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

    rubyshen 评论0 收藏0
  • Android view - 收藏集 - 掘金

    摘要:掘金一个可实现长按扫描上的二维码的工具库。说到刷新加载,我们第一个想到啥,对了从头开始学四类添加和多种的支持掘金来张图前言敲酷炫的切换效果和弹性指示器。掘金效果图使用方法依赖注意使用时需要在父布局中加入仿讨论组头像掘金仿讨论组头像基 仿美团详情滑动界面,并兼容 NestedScroll 嵌套 - Android - 掘金不论什么APP应该都会有个app产品的详情界面, 详情界面往往也比...

    IntMain 评论0 收藏0
  • 自定义控件及效果

    摘要:实现炫酷的登录效果美观,动画效果丰富风格底部选择器支持时间,日期,自定义带来一组风格底部选择器控件,虽然我们不提倡安卓使用风格的控件,但是难免有些产品和美工一味追求风格。 Android 动画效果定值范围选择控件 实现固定值的范围选择, 并添加动态效果, 使用方便 项目需求讨论 - Android 自定义 Dialog 实现步骤及封装 根据实际项目需求出发。因为项目中的对话框要配合整个...

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

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

    ruicbAndroid 评论0 收藏0

发表评论

0条评论

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