固定在浏览器底部显示一个用于提示的div

最新推荐文章于 2021-06-29 14:14:03 发布

one__tiger

最新推荐文章于 2021-06-29 14:14:03 发布

阅读量487

点赞数

文章标签： html jquery bootstrap

本文链接：https://blog.csdn.net/one__tiger/article/details/108233686

版权

最近写项目有要用到一个提示的东西，所以就写了个demo让以后也方便找，响应事件用了jQuery，铃铛图标用了bootstrap自带的一个图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
	<title>固定底部显示的提示按钮</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style type="text/css">
	    .bellLayer {
            position:fixed;
            bottom: 40px;
            right: 60px;
            width: 40px;
            line-height:40px;
            background: #4966ff;
            border-radius: 20px;
            border:1px solid #5754ff;
            color: white;
            text-align: center;
        }
	</style>
</head>
<body>
    <div id="bell" class="bellLayer" title="您有一条新消息">
		<span class="glyphicon glyphicon-bell"></span>
    </div>
</body>
<script>
    /*方法体，具体按需求来实现，此处也可以替换成vue.js的实现方式实现*/
    $("#bell").click(function(){
        alert("你有一条新消息")
    })
</script>
</html>

效果：
在这里插入图片描述

one__tiger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
固定在浏览器底部显示一个用于提示的div

最近写项目有要用到一个提示的东西，所以就写了个demo让以后也方便找<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>固定底部显示的提示按钮</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/
复制链接

扫一扫