提交按钮传递参数打开模态窗口选择是否确认html全部代码
时间: 2023-08-13 10:05:04 浏览: 41
以下是完整的HTML和JavaScript代码,包括模态框和提交操作:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>提交按钮传递参数打开模态窗口选择是否确认</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<!-- 模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmModalLabel">确认提交</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
确定要提交吗?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="confirmBtn">确定</button>
</div>
</div>
</div>
</div>
<!-- 提交按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#confirmModal" onclick="passParameter()">提交</button>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
function passParameter() {
// 传递参数,例如:
var parameter = "参数值";
// 模态框中点击“确定”按钮后执行的操作
$('#confirmBtn').on('click', function() {
// 执行提交操作,例如:
$.ajax({
type: 'POST',
url: 'submit.php',
data: {
parameter: parameter
},
success: function(response) {
// 提交成功后的操作
},
error: function() {
// 提交失败后的操作
}
});
});
}
</script>
</body>
</html>
```
需要注意的是,这里的代码依赖于Bootstrap框架,因此需要在HTML中引入Bootstrap的CSS和JavaScript文件。如果您没有使用Bootstrap框架,需要将相关代码进行修改。