浮动顶层按钮js

浮动顶层按钮（Floating Action Button，简称FAB）是一种在移动应用和网页设计中常见的UI组件。它通常是一个圆形的按钮，位于屏幕的右下角或左下角，用于执行用户界面中的主要操作，如创建、添加或提交等。

基础概念

位置：通常位于屏幕的四个角落之一，最常见的是右下角。
形状：通常是圆形，但也可以是方形或其他形状。
交互：点击后可以触发一个操作，如弹出一个菜单、打开一个新的页面或执行一个特定的功能。

类型

单一操作按钮：点击后执行一个固定的操作。
菜单按钮：点击后弹出一个菜单，包含多个操作选项。

应用场景

内容创建应用：如社交媒体、博客平台，用于快速发布新内容。
任务管理应用：用于快速添加新任务。
电商应用：用于快速结算或添加商品到购物车。

示例代码

以下是一个简单的HTML和JavaScript示例，展示如何创建一个浮动顶层按钮，并在点击时弹出一个提示框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Floating Action Button Example</title>
    <style>
        .fab {
            position: fixed;
            width: 56px;
            height: 56px;
            bottom: 16px;
            right: 16px;
            background-color: #007bff;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="fab" id="fabButton">+</div>

    <script>
        document.getElementById('fabButton').addEventListener('click', function() {
            alert('FAB clicked!');
        });
    </script>
</body>
</html>