1. 对话框
1). 设置 body填充整个屏幕
* {
margin: 0;
padding: 0;
}
html, body{
width: 100%;
height: 100%;
}
2). 设置body 中的内容
<body>
<div style="background-color: aqua; height: 100%;">
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
<p style="height: 18.75rem;">mazaiting</p>
<input style="height: 18.75rem;" type="text" value="11111111"/><br />
<input style="height: 18.75rem;" type="text" value="11111111"/>
<button onclick="showDialog()"> 开启对话框</button>
</div>
</div>
</body>
设置内层div为 flex 布局,并设置主轴方向为纵向,水平居中与垂直居中。
3). 添加对话框 div
<body>
<div style="background-color: aqua; height: 100%;">
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
<p style="height: 18.75rem;">mazaiting</p>
<input style="height: 18.75rem;" type="text" value="11111111"/><br />
<input style="height: 18.75rem;" type="text" value="11111111"/>
<button onclick="showDialog()"> 开启对话框</button>
</div>
<div id="dialog">
<div>
<div class='title'>标题</div>
<div class="content">内容</div>
<div>
<button class="cancelBtn" onclick="closeDialog()">取消</button>
<button class="okBtn" onclick="alert('mazaiting')">确定</button>
</div>
</div>
</div>
</div>
</body>
css代码
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body{
width: 100%;
height: 100%;
}
#dialog {
background-color: aliceblue;
height: 15rem;
width: 20rem;
position: fixed;
top: 40%;
left: 30%;
display: none;
}
#dialog > div {
height: 100%; width: 100%; display: flex;
flex-direction: column; justify-content: space-around;align-items: center;
}
</style>
对话框使用 fixed来定位,使布局悬浮到整个 body上, left 和 top 定位,display设置 none 为不显示,设置 block 为显示。
js 代码
<script type="text/javascript">
function showDialog() {
var dialog = document.getElementById('dialog');
dialog.style.display = 'block';
}
function closeDialog() {
var dialog = document.getElementById('dialog');
dialog.style.display = 'none';
}
</script>
2. 抽取 css 文件和 js 文件
1). 先抽取 css 代码为 dialog.css文件
* {
margin: 0;
padding: 0;
}
html, body{
width: 100%;
height: 100%;
}
#dialog {
background-color: aliceblue;
height: 15rem;
width: 20rem;
position: fixed;
top: 40%;
left: 30%;
display: none;
}
#dialog > div {
height: 100%; width: 100%; display: flex;
flex-direction: column; justify-content: space-around;align-items: center;
}
2). 在 index.html文件中引用dialog.css文件
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/dialog.css"/>
<script type="text/javascript">
function showDialog() {
var dialog = document.getElementById('dialog');
dialog.style.display = 'block';
}
function closeDialog() {
var dialog = document.getElementById('dialog');
dialog.style.display = 'none';
}
</script>
</head>
3). 抽取 javascript 代码为 dialog.js 文件
function showDialog() {
var dialog = document.getElementById('dialog');
dialog.style.display = 'block';
}
function closeDialog() {
var dialog = document.getElementById('dialog');
dialog.style.display = 'none';
}
4). 引用dialog.js文件
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/dialog.css"/>
<script type="text/javascript" src="js/dialog.js">
</script>
</head>
5). 运行程序,检测是否正常运行
3. 封装使用
1). 修改 dialog.js文件
- 创建 dialog 对象,并设置属性及显示与隐藏方法
var objDialog = {
dialog : document.getElementById('dialog'),
title : document.querySelector('.title'),
content : document.querySelector('.content'),
cancelBtn: document.getElementsByClassName('cancelBtn')[0],
okBtn: document.getElementsByClassName('okBtn')[0],
showDialog: function(title,content,cancelTest,successTest,cancelFun,succeddFun){
this.title.innerHTML = title;
this.content.innerHTML = content;
this.cancelBtn.innerHTML = cancelTest;
this.okBtn.innerHTML = successTest;
this.cancelBtn.onclick = cancelFun;
this.okBtn.onclick = succeddFun;
this.dialog.style.display = 'block';
},
closeDialog: function(){
dialog.style.display = 'none';
}
}
function showDialog() {
// var dialog = document.getElementById('dialog');
// dialog.style.display = 'block';
objDialog.showDialog('测试标题', '测试内容', 'cancel', 'ok', function() {
objDialog.closeDialog();
}, function() {
alert('确定');
});
}
2). 修改 js 文件引用位置
<body>
<div style="background-color: aqua; height: 100%;">
</div>
<script type="text/javascript" src="js/dialog.js">
</body>
3). 测试运行
4). 在 js 文件中动态添加对话框
- 首先修改html文件
<body>
<div style="background-color: aqua; height: 100%;">
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
<p style="height: 18.75rem;">mazaiting</p>
<input style="height: 18.75rem;" type="text" value="11111111"/><br />
<input style="height: 18.75rem;" type="text" value="11111111"/>
<button onclick="showDialog()"> 开启对话框</button>
</div>
</div>
<script type="text/javascript" src="js/dialog.js">
</body>
- 修改js 文件
// var objDialog = {
// dialog : document.getElementById('dialog'),
// title : document.querySelector('.title'),
// content : document.querySelector('.content'),
// cancelBtn: document.getElementsByClassName('cancelBtn')[0],
// okBtn: document.getElementsByClassName('okBtn')[0],
//
// showDialog: function(title,content,cancelTest,successTest,cancelFun,succeddFun){
// this.title.innerHTML = title;
// this.content.innerHTML = content;
// this.cancelBtn.innerHTML = cancelTest;
// this.okBtn.innerHTML = successTest;
// this.cancelBtn.onclick = cancelFun;
// this.okBtn.onclick = succeddFun;
// this.dialog.style.display = 'block';
// },
// closeDialog: function(){
// dialog.style.display = 'none';
// }
// }
function showDialog() {
dialog().showDialog('测试标题', '测试内容', 'cancel', 'ok', function() {
dialog().closeDialog();
}, function() {
alert('确定');
});
}
var AlertDialog = null;
function dialog(){
if (AlertDialog){
return AlertDialog;
}
let cancelBtn = document.createElement('button');
cancelBtn.setAttribute('class', 'cancelBtn');
let okBtn = document.createElement('button');
okBtn.setAttribute('class', 'okBtn');
let divBtn = document.createElement('div');
divBtn.appendChild(cancelBtn);
divBtn.appendChild(okBtn);
let titleDiv = document.createElement('div');
titleDiv.setAttribute('class', 'title');
let contentDiv = document.createElement('div');
contentDiv.setAttribute('class', 'content');
let div = document.createElement('div');
div.appendChild(titleDiv);
div.appendChild(contentDiv);
div.appendChild(divBtn);
let dialog = document.createElement('div');
dialog.setAttribute('id', 'dialog');
dialog.appendChild(div);
document.body.appendChild(dialog);
return AlertDialog = {
dialog : document.getElementById('dialog'),
title : document.querySelector('.title'),
content : document.querySelector('.content'),
cancelBtn: document.getElementsByClassName('cancelBtn')[0],
okBtn: document.getElementsByClassName('okBtn')[0],
showDialog: function(title,content,cancelTest,successTest,cancelFun,succeddFun){
this.title.innerHTML = title;
this.content.innerHTML = content;
this.cancelBtn.innerHTML = cancelTest;
this.okBtn.innerHTML = successTest;
this.cancelBtn.onclick = cancelFun;
this.okBtn.onclick = succeddFun;
this.dialog.style.display = 'block';
},
closeDialog: function(){
dialog.style.display = 'none';
}
};
}