javascript实现简约的页面右下角点击弹出窗口示例【测试可用】原创

原创更新时间：2023年07月07日 08:48:25 原创投稿：shichen2014

这篇文章主要介绍了javascript实现的页面右下角点击弹出窗口功能,结合实例形式详细分析了javascript页面右下角点击弹出窗口功能的相关步骤、原理与注意事项,需要的朋友可以参考下

功能需求

页面右下角默认存在一个悬浮按钮，点击按钮可在其上方弹出一个窗口区域，弹窗自身带有关闭按钮，也可以通过再次点击下方的按钮关闭右下角弹窗。

实现方法

1. css部分：

.container {
  position: relative;
  height: 100vh;
  padding: 20px;
}
.content {
  background-color: #f1f1f1;
  height: 100%;
  padding: 20px;
}
.floating-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #337ab7;
  color: #fff;
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 99;
}
.popup {
  position: fixed;
  bottom: 80px;
  right: 30px;
  width: 300px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  display: none;
}
.popup-content {
  padding: 20px;
}
.popup p {
  margin-bottom: 10px;
}
.popup button {
  background-color: #337ab7;
  color: #fff;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  float: right;
}

2. html部分：

<div class="container">
  <div class="content">页面内容</div>
  <div class="floating-button" onclick="togglePopup()">点击打开</div>
  <div class="popup" id="popup" style="display: none;">
    <button onclick="closePopup()">X</button>
    <div class="popup-content">
      <p>弹出窗口内容</p>
    </div>
  </div>
</div>

3. js部分：

function togglePopup() {
  var popup = document.getElementById("popup");
  if (popup.style.display === "none") {
    popup.style.display = "block";
  } else {
    popup.style.display = "none";
  }
}
function closePopup() {
  var popup = document.getElementById("popup");
  popup.style.display = "none";
}

代码说明：

上述代码会创建一个容器（.container），其中包含页面内容（.content）、浮动按钮（.floating-button）和弹出窗口（.popup）。通过点击浮动按钮，可以切换弹出窗口的显示状态（动态修改其 display 属性为 none 或 block ）。弹出窗口中包含自定义的内容和关闭按钮。

这是一个基本的弹窗功能，有需要的同学还可以进一步美化其样式，或者增加其功能（如：默认动态加载栏目、内容页相关参考信息；ajax查询等）

完整实例：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面右下角弹出窗口示例</title>
<style>
.container {
  position: relative;
  height: 100vh;
  padding: 20px;
}
.content {
  background-color: #f1f1f1;
  height: 100%;
  padding: 20px;
}
.floating-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #337ab7;
  color: #fff;
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 99;
}
.popup {
  position: fixed;
  bottom: 80px;
  right: 30px;
  width: 300px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  display: none;
}
.popup-content {
  padding: 20px;
}
.popup p {
  margin-bottom: 10px;
}
.popup button {
  background-color: #337ab7;
  color: #fff;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  float: right;
}
</style>
</head>
<body>
<div class="container">
  <div class="content">页面内容</div>
  <div class="floating-button" onclick="togglePopup()">点击打开</div>
  <div class="popup" id="popup" style="display: none;">
    <button onclick="closePopup()">X</button>
    <div class="popup-content">
      <p>弹出窗口内容</p>
    </div>
  </div>
</div>
<script>
function togglePopup() {
  var popup = document.getElementById("popup");
  if (popup.style.display === "none") {
    popup.style.display = "block";
  } else {
    popup.style.display = "none";
  }
}
function closePopup() {
  var popup = document.getElementById("popup");
  popup.style.display = "none";
}
</script>
</body>
</html>

感兴趣的同学还可以使用本站在线工具测试上述代码的运行效果：http://tools.jb51.net/code/HtmlJsRun

您可能感兴趣的文章:

判断字符串的长度(优化版)中文占两个字符
判断字符串的长度的方法有很多，本例介绍的是优化之前的方法，记住中文占两个字符，需要的朋友不要错过
2014-10-10
JS利用中介模式开发全局控制器
这篇文章主要为大家介绍了JS利用中介模式开发全局控制器图文示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
利用pixi.js制作简单的跑酷小游戏
PixiJS 提供一个适用于所有设备的快速轻量级 2D 库。PixiJS 具有完整的 WebGL 支持，并且可以无缝地回退到 HTML5 的画布。本文将使用pixi.js制作简单的跑酷小游戏，感兴趣的可以尝试一下
2022-07-07
JavaScript 创建随机数和随机图片
关于javascript随机数的，很早以前的文章了，不过内容还是不错的，如果想要更多的效果，可以去脚本之家搜下。
2009-12-12
JavaScript用20行代码实现虎年春节倒计时
春节将至，相信大家跟小编一样很激动呀。为了迎接虎年春节到来，小编为大家准备了一个虎年春节倒计时，仅20行代码用js就实现啦。感兴趣的可以动手试一试
2022-01-01
第一次接触神奇的Bootstrap基础排版
第一次接触神奇的Bootstrap基础排版，Bootstrap让Web开发更迅速、更简单，感兴趣的小伙伴们可以参考一下
2016-07-07
微信小程序如何获取用户收货地址
这篇文章主要为大家详细介绍了微信小程序获取用户收货地址的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
JavaScript实现简单Tip提示框效果
这篇文章主要介绍了JavaScript实现简单Tip提示框效果,涉及JavaScript响应鼠标事件针对页面元素动态操作的相关技巧,需要的朋友可以参考下
2016-04-04
js实现浮动在网页右侧的简洁QQ在线客服代码
这篇文章主要介绍了js实现浮动在网页右侧的简洁QQ在线客服代码,通过简单的自定义函数控制客服图片的显示与隐藏效果,非常具有实用价值,需要的朋友可以参考下
2015-09-09
JavaScript定时器setTimeout()和setInterval()详解
这篇文章主要为大家详细介绍了JavaScript定时器setTimeout()和setInterval()的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08