分享好友 教程首页 教程搜索 频道列表

手机版上的弹窗html、css、js

2023-04-12 18:423030
+关注29
核心提示:以下是一个简单的示例弹窗的 HTML、CSS 和 JavaScript 代码,这个弹窗的样式和动作...

以下是一个简单的示例弹窗的 HTML、CSS 和 JavaScript 代码:

HTML 代码:

<div id="popup-container">
  <div id="popup-header">Hello World</div>
  <div id="popup-content">This is a simple popup.</div>
  <button id="close-btn">Close</button>
</div>


CSS 代码:

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

#popup-header {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

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

#close-btn {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}


JavaScript 代码:

var popupContainer = document.getElementById("popup-container");
var closeBtn = document.getElementById("close-btn");

function openPopup() {
  popupContainer.style.display = "block";
}

function closePopup() {
  popupContainer.style.display = "none";
}

closeBtn.addEventListener("click", closePopup);

window.onload = function() {
  openPopup();
};


这个弹窗的样式和动作分别由 CSS 和 JavaScript 控制。当页面加载完毕后,自动运行

本文标签: #弹窗 #手机
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

js怎么实现弹幕功能

    实现方法:1、创建html文件;2、添加html代码架构;3、在body标签中使用div、input、button标签分给页面设计效果显示框、输入框、弹幕提交按钮;4、添加script标签并写入js代码来实现弹幕效果;5、通过浏览器方式查看设计效果。

小黑 JavaScript教程2024-03-12

在H5手机端页面上显示弹窗后禁止底层滚动的解决方案

    今天介绍在H5手机端页面上显示弹窗后禁止底层滚动的解决方案

小黑 JavaScript教程2023-07-28

html实现弹窗的实例

    用html及原生js写个弹窗,供参考

网络转载 网页素材2021-12-22

前端开发技术之jquery实现可关闭的倒计时广告特效HTML代码

    这是一款类似播放视频时候最开始的倒计时广告,广告时间结束才能看到视频内容,一个JS小贴片广告代码,右上角带关闭按钮,左上角显示倒计时剩余时间,运行jQuery代码综合实现,CSS和HTML共同结合的网页特效,兼容各

网络转载 JS相关2021-12-22

使用JQuery完成页面定时弹出广告

    Js相关技术定时器:setIntervalclearIntervalsetTimeoutclearTimeout显示: img.style.display = block隐藏: img.style.display = noneimg 对象style属性: style对象需求分析当用户打开界面,3秒钟之后弹出广告,这个

小黑 JS相关2021-12-22

下一篇
我来说两句
抢沙发