javascript實現(xiàn)簡約的頁面右下角點擊彈出窗口示例【測試可用】原創(chuàng)

原創(chuàng) 更新時間：2023年07月07日 08:48:25 原創(chuàng) 投稿：shichen2014

這篇文章主要介紹了javascript實現(xiàn)的頁面右下角點擊彈出窗口功能,結(jié)合實例形式詳細分析了javascript頁面右下角點擊彈出窗口功能的相關(guān)步驟、原理與注意事項,需要的朋友可以參考下

功能需求

頁面右下角默認存在一個懸浮按鈕，點擊按鈕可在其上方彈出一個窗口區(qū)域，彈窗自身帶有關(guān)閉按鈕，也可以通過再次點擊下方的按鈕關(guān)閉右下角彈窗。

實現(xiàn)方法

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">頁面內(nèi)容</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>彈出窗口內(nèi)容</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";
}

代碼說明：

上述代碼會創(chuàng)建一個容器（.container），其中包含頁面內(nèi)容（.content）、浮動按鈕（.floating-button）和彈出窗口（.popup）。通過點擊浮動按鈕，可以切換彈出窗口的顯示狀態(tài)（動態(tài)修改其 display 屬性為 none 或 block ）。彈出窗口中包含自定義的內(nèi)容和關(guān)閉按鈕。

這是一個基本的彈窗功能，有需要的同學還可以進一步美化其樣式，或者增加其功能（如：默認動態(tài)加載欄目、內(nèi)容頁相關(guān)參考信息；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">頁面內(nèi)容</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>彈出窗口內(nèi)容</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

您可能感興趣的文章: