利用HTML+CSS+JS完成弹窗功能并具备关闭按钮

很多时候咱们在写一些小插件或者开发网站的时候都会运用到弹窗功能,这样的好处是不占用页面布局位置,只需要点击一个小按钮就可以实现弹窗!

实现分析:

  • HTML编写一个按钮和一个弹出的显示框,弹出框的样式设置为display:none,即一开始不显示。
  • CSS中定义了弹出框的样式,包括弹出框的位置、大小、背景色、边框、阴影等。
  • JavaScript中定义了两个函数,一个用于显示弹出框,一个用于隐藏弹出框。当点击按钮时,调用showDialog()函数,将弹出框的display属性设置为block,即显示弹出框;当点击弹出框中的关闭按钮时,调用hideDialog()函数,将弹出框的display属性设置为none,即隐藏弹出框。
  • 在JavaScript中还需要获取弹出框的DOM元素,可以通过document.getElementById()方法获取。

基础讲解:

  • 咱们在写一个HTML页面的时候需要注意以下事项
  • 咱们首先声明<!DOCTYPE html>这个是一个HTML页面
  • 其次使用<html>进行包裹,当然也要注意标签的闭合也就是</html>
  • 然后编写它的头部<head></head>
  • 中间部分<body></body>
  • 当然也有底部<footer></footer>本次代码不需要编写底部
  • 还运用到了<script>和<style>标签
  1. <script>是HTML中的标签,用于嵌入JavaScript代码,可以在网页中实现动态效果和交互功能。
  2. <style>也是HTML中的标签,用于定义网页的样式,包括字体、颜色、布局等。可以通过CSS语言来编写样式规则,使网页更加美观和易于阅读。

代码:

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript弹出框示例</title>
</head>
<body>
<button onclick="showDialog()">显示弹出框</button>

<div id="dialog" style="display:none;">
  <div id="dialog-content">
    <h2>弹出框标题</h2>
    <p>这是弹出框的内容</p>
    <button onclick="hideDialog()">关闭</button>
  </div>
</div>
<style>
#dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

#dialog-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#dialog-content h2 {
  font-size: 24px;
  margin-top: 0;
}

#dialog-content p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

#dialog-content button {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

#dialog-content button:hover {
  background-color: #0069d9;
}
</style>
<script>
function showDialog() {
  document.getElementById("dialog").style.display = "block";
}

function hideDialog() {
  document.getElementById("dialog").style.display = "none";
}
</script>
</body>
</html>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

给TA打赏
共{{data.count}}人
人已打赏
java

Java中逗号分隔的字符串和List相互转换

2023-4-16 14:07:08

css3htmljavascript

Java+CSS3+HTML实现鼠标触碰下拉子菜单

2023-5-2 21:08:03

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索