提交按钮传递参数打开模态窗口选择是否确认html
时间: 2023-08-16 17:08:17 浏览: 43
您可以使用以下代码实现:
1. 在HTML中,添加一个模态框和一个按钮,如下所示:
```html
<!-- 模态框 -->
<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>
```
2. 在JavaScript中,定义一个函数`passParameter()`,用于传递参数,并在模态框中点击“确定”按钮后执行提交操作,如下所示:
```javascript
function passParameter() {
// 传递参数,例如:
var parameter = "参数值";
// 模态框中点击“确定”按钮后执行的操作
$('#confirmBtn').on('click', function() {
// 执行提交操作,例如:
$.ajax({
type: 'POST',
url: 'submit.php',
data: {
parameter: parameter
},
success: function(response) {
// 提交成功后的操作
},
error: function() {
// 提交失败后的操作
}
});
});
}
```
这样,当用户点击“提交”按钮时,将会打开一个模态框,询问用户是否确认提交。如果用户点击“确定”按钮,则会执行提交操作,并将参数传递给后台。