jQuery 模态框
王棋
使用原生jQuery编写一个模态框
实际上， 模态框就是一个大的div进行绝对定位，遮住本来的页面，使用户无法点击页面
以下粘一个代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入jq -->
<script src="./jquery-3.3.1.min.js"></script>
<title>Document</title>
<script>
$(function () {
$('.showDialog').click(function () {
// 显示模态框，可以fadeIn，slide操作
$('.dialog').show(1000)
})
// 确定按钮的操作
$('.submit').click(function () {
$('.dialog').fadeToggle(1000);
})
// 取消按钮的操作
$('.cancel').click(function () {
$('.dialog').hide(1000)
})
})
</script>
<style>
.dialog {
width: 100%;
/* vh为可视窗口的单位，100为满 */
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
line-height: 75px;
display: none;
}
.dialog .container {
width: 60%;
height: 400px;
background-color: #fff;
margin: calc((100vh - 400px)/2) auto;
position: relative;
}
.dialog .container .dialog_footer {
position: absolute;
bottom: 0;
}
.dialog .container .dialog_footer button {
position: relative;
left: 350px;
display: inline-block;
width: 50px;
bottom: 10px;
}
</style>
</head>
<body>
<button class="showDialog">显示</button>
<!-- dialog 为遮罩层，即灰色的部分 -->
<div class="dialog">
<!-- 模态框主内容，一下就是你要塞入的内容，即白色的部分 -->
<div class="container">
<div class="dialog_header">
模态框的标题
</div>
<div class="dialog_center">
这是一个萌萌哒的模态框内容区域
</div>
<div class="dialog_footer">
<button class="cancel">取消</button>
<button class="submit">确定</button>
</div>
</div>
</div>
</body>
</html>
注意不要忘记引入jq文件哦
类似资料：