html 浮动窗口置顶,html浮动提示框功能的实现代码

一般的表单提示总会占据表单的位置,让表单边长,或者变宽,影响布局,但如果让提示框像对话框一样浮在所需内容旁边就可以解决这一问题。

HTML及样式

首先做一张表单

注册

然后我们需要设计一下对话框

6cd598cc084719d3259f3eb26c76145c.png

大概就是这样,由一个三角形和矩形组成。

#tips{

padding-top: 6px;

z-index: 9999;

/*让对话置顶以免被其他元素遮挡*/

position: fixed;

width: 1000px;

}

#form-tips{

background-color: black;

color: #ffffff;

padding: 0 6px;

position: absolute;

}

#triangle{

border:10px solid;

border-color: transparent black transparent transparent;

}

这是一个提示

三角形怎么来的?参考这篇经验

js实现浮动

页面已经做好了,现在我们需要一个

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值