传递多个参数绑定模态窗口确认按钮后执行html
时间: 2023-09-08 15:16:50 浏览: 59
以下是一个简单的示例HTML代码,展示如何传递多个参数绑定模态窗口确认按钮后执行:
```html
<!DOCTYPE html>
<html>
<head>
<title>传递多个参数绑定模态窗口确认按钮后执行</title>
</head>
<body>
<button id="openModalBtn">打开模态窗口</button>
<div id="myModal" class="modal">
<div class="modal-content">
<h2>请输入参数</h2>
<label for="input1">参数1:</label>
<input type="text" id="input1"><br>
<label for="input2">参数2:</label>
<input type="text" id="input2"><br>
<label for="input3">参数3:</label>
<input type="text" id="input3"><br>
<button id="confirmBtn">确认</button>
</div>
</div>
<script>
// 获取模态窗口和确认按钮
var modal = document.getElementById("myModal");
var btn = document.getElementById("openModalBtn");
var confirmBtn = document.getElementById("confirmBtn");
// 点击打开模态窗口按钮时,显示模态窗口
btn.onclick = function() {
modal.style.display = "block";
}
// 在确认按钮的点击事件中,调用处理函数并传递参数
confirmBtn.addEventListener("click", function() {
// 获取需要传递的参数
var param1 = document.getElementById("input1").value;
var param2 = document.getElementById("input2").value;
var param3 = document.getElementById("input3").value;
// 调用处理函数
processInput(param1, param2, param3);
// 隐藏模态窗口
modal.style.display = "none";
});
// 处理函数,用来获取表单元素的值,并执行需要的操作
function processInput(param1, param2, param3) {
// 执行需要的操作,例如输出参数
console.log("参数1:" + param1);
console.log("参数2:" + param2);
console.log("参数3:" + param3);
}
</script>
<style>
/* 模态窗口样式 */
.modal {
display: none; /* 默认隐藏 */
position: fixed; /* 固定定位 */
z-index: 1; /* 显示在最上层 */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* 当内容超过窗口大小时,显示滚动条 */
background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色背景 */
}
.modal-content {
background-color: #fefefe; /* 白色背景 */
margin: 15% auto; /* 上下居中 */
padding: 20px;
border: 1px solid #888;
width: 40%; /* 宽度为40% */
}
</style>
</body>
</html>
```
您可以在本地运行该代码,查看模态窗口的效果,并在控制台中查看输出的参数值。