最终效果
- 单击弹出窗口
- 单击确定按钮
- 单击取消按钮，最初弹出的窗口隐藏
实现一：采用html编写弹出窗口内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dialog {
position: absolute;
z-index: 9999;
top: 110px;
left: 45%;
transform: translate(-50%, -50%);
width: 290px;
height: 130px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
padding: 20px;
display: none;
}
#dialog h3 {
margin-top: 0;
}
#dialog div{
margin-top: 15px;
}
#dialog button {
margin-right: 10px;
float: right;
}
</style>
</head>
<body>
<button onclick="showDialog()">弹出窗口</button>
<div id="dialog">
<h3>导出数据</h3>
<p>按页面条件导出数据还是导出所有的数据</p>
<input type="radio" name="type" value="1" checked> 按页面条件导出
<input type="radio" name="type" value="2"> 导出全部
<div>
<button onclick="hide()">取消</button>
<button onclick="javascript:alert(22);">确定</button>
</div>
</div>
<script>
function show() {
// 获取对话框元素并设置标题和消息
let dialog = document.querySelector('#dialog');
// 显示对话框
dialog.style.display = 'block';
}
function hide() {
// 获取对话框元素并隐藏
let dialog = document.querySelector('#dialog');
dialog.style.display = 'none';
}
function showDialog() {
let dialog = document.querySelector('#dialog');
dialog.querySelector('button').style.display = 'block';
show('确认删除', '你确定要删除这条记录吗？');
}
</script>
</body>
</html>
实现二：采用JavaScript编写弹出窗口内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dialog {
position: absolute;
z-index: 9999;
top: 110px;
left: 45%;
transform: translate(-50%, -50%);
width: 290px;
height: 130px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
padding: 20px;
display: none;
}
#dialog h3 {
margin-top: 0;
}
#dialog div {
margin-top: 15px;
}
#dialog button {
margin-right: 10px;
float: right;
}
</style>
</head>
<body>
<button onclick="showDialog('导出数据')">弹出窗口</button>
<script>
function showDialog() {
let dialogDiv = document.createElement("div");
dialogDiv.id = "dialog";
let h3Element = document.createElement("h3");
h3Element.innerText = '导出数据';
dialogDiv.appendChild(h3Element);
let pElement = document.createElement("p");
pElement.innerText = "按页面条件导出数据还是导出所有的数据";
dialogDiv.appendChild(pElement);
let div1 = document.createElement("div");
let input1Element = document.createElement("input");
input1Element.type = "radio";
input1Element.name = "requestType";
input1Element.checked=true;
input1Element.value = 1;
div1.appendChild(input1Element);
let span1 = document.createElement("span");
span1.innerText = "按页面条件导出";
div1.appendChild(span1);
let input2Element = document.createElement("input");
input2Element.type = "radio";
input2Element.name = "requestType";
input2Element.value = 2;
div1.appendChild(input2Element);
let span2 = document.createElement("span");
span2.innerText = "按页面条件导出";
div1.appendChild(span2);
dialogDiv.appendChild(div1);
let div2 = document.createElement("div");
let button1 = document.createElement("button");
button1.addEventListener("click", function () {
dialogDiv.style.display = 'none';
});
button1.innerText = "取消";
div2.appendChild(button1);
let button2 = document.createElement("button");
button2.addEventListener("click", function () {
let checkValue=1;
let radioButtons = document.getElementsByName('requestType');
for (let i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
checkValue = radioButtons[i].value;
break;
}
}
alert(checkValue)
});
button2.innerText = "确定";
div2.appendChild(button2);
dialogDiv.appendChild(div2);
document.body.appendChild(dialogDiv);
// 显示对话框
dialogDiv.style.display = 'block';
}
</script>
</body>
</html>
实现三：抽取成独立的JS插件，在网页中使用
- 第一步：抽取出exportDialog.css：
#dialog {
position: absolute;
z-index: 9999;
top: 110px;
left: 45%;
transform: translate(-50%, -50%);
width: 290px;
height: 130px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
padding: 20px;
display: none;
}
#dialog h3 {
margin-top: 0;
}
#dialog div {
margin-top: 15px;
}
#dialog button {
margin-right: 10px;
float: right;
}
- 第二步；抽取出exportDialog.js：
/**
*
* @param url1 按页面条件导出
* @param url2 导出全部数据
*/
function showDialog(url1,url2 ) {
let dialogDiv = document.createElement("div");
dialogDiv.id = "dialog";
let h3Element = document.createElement("h3");
h3Element.innerText = '导出数据';
dialogDiv.appendChild(h3Element);
let pElement = document.createElement("p");
pElement.innerText = "按页面条件导出数据还是导出所有的数据";
dialogDiv.appendChild(pElement);
let div1 = document.createElement("div");
let input1Element = document.createElement("input");
input1Element.type = "radio";
input1Element.name = "requestType";
input1Element.checked=true;
input1Element.value = 1;
div1.appendChild(input1Element);
let span1 = document.createElement("span");
span1.innerText = "按页面条件导出";
div1.appendChild(span1);
let input2Element = document.createElement("input");
input2Element.type = "radio";
input2Element.name = "requestType";
input2Element.value = 2;
div1.appendChild(input2Element);
let span2 = document.createElement("span");
span2.innerText = "全部导出";
div1.appendChild(span2);
dialogDiv.appendChild(div1);
let div2 = document.createElement("div");
let button1 = document.createElement("button");
button1.addEventListener("click", function () {
dialogDiv.style.display = 'none';
});
button1.innerText = "取消";
div2.appendChild(button1);
let button2 = document.createElement("button");
button2.addEventListener("click",function () {
let checkValue=1;
let radioButtons = document.getElementsByName('requestType');
for (let i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
checkValue = radioButtons[i].value;
break;
}
}
if(checkValue==1){
//按页面条件导出
document.location.href= url1
}
if(checkValue==2){
//全部导出
document.location.href= url2
}
//隐藏对话框
dialogDiv.style.display = 'none';
} );
button2.innerText = "确定";
div2.appendChild(button2);
dialogDiv.appendChild(div2);
document.body.appendChild(dialogDiv);
// 显示对话框
dialogDiv.style.display = 'block';
}
- 第三步：在页面中使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/tiku/static/dialog/exportDialog.css"></link>
<script src="/tiku/static/dialog/exportDialog.js"></script>
</head>
<body>
<button onclick="showDialog('/tiku/subject/export?state=1&pid=-2','/tiku/subject/export?pid=-2')">弹出窗口</button>
<script>
</script>
</body>
</html>
文章出处登录后可见！
已经登录？立即刷新
