javascript+html5+css3自定义弹出窗口效果主要可以通过以下步骤实现:
"javascript+html5+css3自定义弹出窗口效果"主要可以通过以下步骤实现:
第一步:HTML部分
在HTML代码中,我们需要首先定义一个触发弹出窗口的按钮,用于触发弹出窗口的开启。同时我们需要在代码中定义一个 <div>
标签作为弹出窗口的容器。
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<title>自定义弹出窗口效果</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 弹出窗口背景层样式 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: none;
}
/* 弹出窗口样式 */
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
z-index: 1001;
display: none;
}
</style>
</head>
<body>
<button id="open-modal-btn">打开弹出窗口</button>
<div class="modal-overlay"></div>
<div class="modal">
<h2>这里是弹出窗口</h2>
<button id="close-modal-btn">关闭弹出窗口</button>
</div>
</body>
</html>
第二步:CSS部分
在CSS部分实现弹出窗口的样式,包括弹出窗口的位置、宽高、背景色等。
示例代码如下:
/* 弹出窗口背景层样式 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: none;
}
/* 弹出窗口样式 */
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
z-index: 1001;
display: none;
}
第三步:Javascript部分
在Javascript中实现弹出窗口的逻辑。通过添加class实现弹出窗口的显示和隐藏。
示例代码如下:
// 取得打开和关闭按钮
let openModalBtn = document.getElementById("open-modal-btn");
let closeModalBtn = document.getElementById("close-modal-btn");
// 取得模态框和模态框背景
let modal = document.querySelector(".modal");
let modalOverlay = document.querySelector(".modal-overlay");
// 打开模态框
openModalBtn.onclick = function () {
modal.classList.add("show-modal");
modalOverlay.classList.add("show-modal-overlay");
};
// 关闭模态框
closeModalBtn.onclick = function () {
modal.classList.remove("show-modal");
modalOverlay.classList.remove("show-modal-overlay");
};
示例说明一:
下面是一个点击按钮弹出登录框的示例:
<!DOCTYPE html>
<html>
<head>
<title>自定义弹出窗口效果</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 弹出窗口背景层样式 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: none;
}
/* 弹出窗口样式 */
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
z-index: 1001;
display: none;
}
/* 登录框表单样式 */
.modal-form {
display: flex;
flex-direction: column;
}
.modal-form label {
margin-top: 10px;
}
.modal-form input {
margin-bottom: 10px;
}
</style>
</head>
<body>
<button id="open-modal-btn">打开登录框</button>
<div class="modal-overlay"></div>
<div class="modal">
<h2>登录框</h2>
<form class="modal-form" action="">
<label for="user-name">用户名:</label>
<input type="text" id="user-name">
<label for="user-pwd">密码:</label>
<input type="password" id="user-pwd">
<button type="submit">登录</button>
</form>
<button id="close-modal-btn">关闭登录框</button>
</div>
<script>
// 取得打开和关闭按钮
let openModalBtn = document.getElementById("open-modal-btn");
let closeModalBtn = document.getElementById("close-modal-btn");
// 取得模态框和模态框背景
let modal = document.querySelector(".modal");
let modalOverlay = document.querySelector(".modal-overlay");
// 打开模态框
openModalBtn.onclick = function () {
modal.classList.add("show-modal");
modalOverlay.classList.add("show-modal-overlay");
};
// 关闭模态框
closeModalBtn.onclick = function () {
modal.classList.remove("show-modal");
modalOverlay.classList.remove("show-modal-overlay");
};
</script>
</body>
</html>
示例说明二:
下面是一个弹出图片预览框的示例:
<!DOCTYPE html>
<html>
<head>
<title>自定义弹出窗口效果</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 弹出窗口背景层样式 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: none;
}
/* 弹出窗口样式 */
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
z-index: 1001;
display: none;
}
/* 图片样式 */
.modal-img {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<img src="./image.jpg" id="open-modal-btn">
<div class="modal-overlay"></div>
<div class="modal">
<img class="modal-img" src="./image.jpg">
<button id="close-modal-btn">关闭预览框</button>
</div>
<script>
// 取得打开和关闭按钮
let openModalBtn = document.getElementById("open-modal-btn");
let closeModalBtn = document.getElementById("close-modal-btn");
// 取得模态框和模态框背景
let modal = document.querySelector(".modal");
let modalOverlay = document.querySelector(".modal-overlay");
let modalImg = document.querySelector(".modal-img");
// 打开模态框
openModalBtn.onclick = function () {
modal.classList.add("show-modal");
modalOverlay.classList.add("show-modal-overlay");
modalImg.setAttribute("src", openModalBtn.getAttribute("src"));
};
// 关闭模态框
closeModalBtn.onclick = function () {
modal.classList.remove("show-modal");
modalOverlay.classList.remove("show-modal-overlay");
};
</script>
</body>
</html>
以上就是“javascript+html5+css3自定义弹出窗口效果”的完整攻略。
沃梦达教程
本文标题为:javascript+html5+css3自定义弹出窗口效果
![](/xwassets/images/pre.png)
![](/xwassets/images/next.png)
猜你喜欢
- Java文件流的解读 2023-10-08
- JSP 导出Excel表格的实例 2023-08-01
- jsp编程去除空白行的方法 2023-08-03
- Spring核心方法refresh的使用解析 2023-04-17
- 关于Java中finalize析构方法的作用详解 2023-07-15
- RocketMQ NameServer 核心源码解析 2023-05-19
- j2Cache线上异常排查问题解决记录分析 2022-11-05
- springBoot+mybaties后端多层架构的实现示例 2023-02-19
- JSP 注释的详解及简单实例 2023-07-31
- SpringBoot程序的打包与运行的实现 2023-02-05