使用 Html、CSS 和 JavaScript 创建模态弹出框的方法

最新推荐文章于 2023-12-04 20:51:59 发布

琴歌声声送我

最新推荐文章于 2023-12-04 20:51:59 发布

阅读量1.2k

点赞数 1

分类专栏：前端开发专栏文章标签： css html javascript

本文链接：https://blog.csdn.net/mps8432/article/details/128173219

版权

前端开发专栏专栏收录该内容

16 篇文章 0 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

介绍

在创建网页设计时，要考虑的最重要的事情之一是用户交互性。用户交互性的一个很好的例子是模式框。

模式框主要显示为基于用户执行的操作的消息框在浏览器中。模态框有不同的形式和形状，包括警报框、Flash 通知框、对话框、灯箱。等。

模态框的独特之处在于，它禁用浏览器中的主窗口，但使其保持可见，模态窗口在网页前面显示为子窗口。

在应用程序中使用模态的一些重要情况包括：

显示针对某些操作过程的警告，这些警告可能是不可逆的。

新信息上的闪光通知。
增加用户互动和参与度。

模态也有其缺点，因为：

它们可能会中断用户工作流。
他们立即要求用户的注意。
他们在后台禁用内容，这在某些情况下可能会令人沮丧。

现在让我们开始创建模态弹出框

有一个 index.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/a71707a89a.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./style.css"/>
<title>Popup Box</title>
</head>
<body>
<div id="popUpOverlay"></div>
<div id="popUpBox">
<div id="box">
<i class="fas fa-check-circle fa-5x"></i>
<h1>Here Goes Your Popup</h1>
<div id="closeModal"></div>
</div>
</div>
<button onclick="Alert.render('You look very pretty today.')" class="btn">Show Alert</button>
<script src="./app.js"></script>
</body>
</html>

在上面的索引标记页面中，我们在 head 标签中有一个Font Awesome脚本，我们将在模态框中使用它来显示一个图标。我们还在索引页面上链接了CSS和javascript页面。

在索引页的正文中，我们有一些重要的HTML属性，如id，稍后将在javascript文件中用于操作页面。

最后在我们的按钮标签中，我们有一个onclick事件属性，该属性具有Alert函数，为我们提供了在页面上显示模态消息的功能。

然后增加一个 style.css：

body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: pink;
  font-size: 20px;
  color: white;
  padding: 10px 30px;
  cursor: pointer;
}
#popUpBox{
  width: 500px;
  overflow: hidden;
  background: pink;
  box-shadow: 0 0 10px black;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  padding: 10px;
  text-align: center;
  display: none;
}

在style.css文件中，我们将页面的框大小设置为边框框。此属性允许我们在元素的总宽度和高度中包含填充和边框。

然后我们使用 .btn类设置按钮样式。这使我们能够定位按钮，该按钮允许我们在页面中心显示模态。

最后，使用 #popUpBox，我们可以将模态定位在页面的中心。

使用z-index 属性，我们可以将模态堆叠在页面中其他元素的前面。

在 style.css文件中要注意的最重要的事情是，我们将 display 属性的初始状态设置为none。其原因将在app.js文件中解释。

app.js

var Alert = new CustomAlert();
 
function CustomAlert(){
  this.render = function(){
      //Show Modal
      let popUpBox = document.getElementById('popUpBox');
      popUpBox.style.display = "block";
      //Close Modal
      document.getElementById('closeModal').innerHTML = '<button οnclick="Alert.ok()">OK</button>';
  }
  
this.ok = function(){
  document.getElementById('popUpBox').style.display = "none";
  document.getElementById('popUpOverlay').style.display = "none";
}
}

在这里，我们有一个名为 Alert 的全局变量，它实例化了一个名为CustomAlert（）的函数。在此函数中，我们：

已访问#popUpBox （id）。有了这个，我们将显示设置为块，当单击按钮标签时显示模态。请记住，CSS 文件中的初始状态设置为none。

通过访问HTML文件中的closeModal （id）关闭了模式。有了这个，我们可以设置一个带有onclick事件属性的 HTML 按钮标签。在那里，我们声明了一个名为ok() 的函数。

最后，引用ok()函数，当单击按钮时，我们将模态的 CSS 属性设置为 none。

有了这个，我们应该得到下面的结果：

最后

大家可以根据需要设置样式，并在您正在处理的任何项目中实现它。

我知道设计可能不是最好的，但本文的目标更侧重于javascript实现而不是设计。

琴歌声声送我

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
使用 Html、CSS 和 JavaScript 创建模态弹出框的方法

在创建网页设计时，要考虑的最重要的事情之一是用户交互性。用户交互性的一个很好的例子是模式框。模式框主要显示为基于用户执行的操作的消息框在浏览器中。模态框有不同的形式和形状，包括警报框、Flash 通知框、对话框、灯箱。等。模态框的独特之处在于，它禁用浏览器中的主窗口，但使其保持可见，模态窗口在网页前面显示为子窗口。在应用程序中使用模态的一些重要情况包括：显示针对某些操作过程的警告，这些警告可能是不可逆的。
复制链接

扫一扫