html, 点击确认按钮关闭模态窗,同时刷新模态窗的父页面
时间: 2023-10-07 22:12:28 浏览: 72
你可以使用JavaScript来实现点击确认按钮关闭模态窗并刷新父页面的效果。在确认按钮的点击事件中,你可以使用`window.close()`来关闭模态窗,然后使用`window.opener.location.reload()`来刷新父页面。下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Modal Window</title>
<script>
function closeModal() {
window.close(); // 关闭模态窗
window.opener.location.reload(); // 刷新父页面
}
</script>
</head>
<body>
<h1>Modal Window</h1>
<button onclick="closeModal()">确认</button>
</body>
</html>
```
在上述代码中,当点击确认按钮时,`closeModal()`函数会被调用,关闭模态窗并刷新父页面。
相关问题
润乾报表实现模态窗口提交填报表在本窗口刷新
如果您需要在润乾报表中实现模态窗口提交填报表并在本窗口刷新页面,可以参考以下步骤:
1. 在报表设计器中创建一个填报表,并通过JavaScript编写一个打开填报表的函数。例如:
```
function openModal() {
var url = "填报表的URL地址";
var modal = window.open(url, "填报表", "modal=yes,width=800,height=600,resizable=no");
modal.onunload = function() {
location.reload();
};
}
```
在上面的代码中,我们使用window.open函数打开了一个填报表的模态窗口,并设置了模态窗口的属性,使其无法调整大小。当填报表关闭时,将会自动执行onunload事件,刷新父窗口的页面。
2. 在报表设计器中创建一个提交按钮,并通过JavaScript编写一个提交表单的函数。例如:
```
function submitForm() {
// 获取表单数据并提交
// ...
// 关闭模态窗口
window.close();
}
```
在上面的代码中,我们通过JavaScript获取填报表的数据并提交到服务器,然后通过window.close函数关闭模态窗口。
3. 在报表设计器中将打开填报表的函数和提交表单的函数分别绑定到打开按钮和提交按钮的点击事件中。例如:
```
<button onclick="openModal()">打开填报表</button>
<button onclick="submitForm()">提交表单</button>
```
在上面的代码中,我们使用onclick事件将打开填报表的函数和提交表单的函数分别绑定到打开按钮和提交按钮的点击事件中。
通过以上步骤,您就可以在润乾报表中实现模态窗口提交填报表并在本窗口刷新页面的功能了。需要注意的是,以上代码仅为示例,具体实现方式可能需要根据您的实际需求进行调整。
写一个完整的添加模态框包括 function
好的,以下是一个基于jQuery和Bootstrap框架的模态框添加的完整代码实现:
```html
<!-- 模态框添加按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
添加
</button>
<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">添加记录</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- 表单 -->
<form id="add-form">
<div class="form-group">
<label for="inputName">姓名</label>
<input type="text" class="form-control" id="inputName" name="name" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="inputEmail">邮箱</label>
<input type="email" class="form-control" id="inputEmail" name="email" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label for="inputPhone">电话</label>
<input type="tel" class="form-control" id="inputPhone" name="phone" placeholder="请输入电话">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="add-btn">保存</button>
</div>
</div>
</div>
</div>
<script>
// 添加按钮点击事件
$('#add-btn').click(function () {
// 获取表单数据
var formData = $('#add-form').serialize();
// 发送POST请求,添加记录
$.ajax({
type: 'POST',
url: '/api/add',
data: formData,
success: function (data) {
// 添加成功,关闭模态框并刷新页面
$('#exampleModal').modal('hide');
location.reload();
},
error: function (xhr, status, error) {
// 添加失败,输出错误信息
console.error(xhr.responseText);
}
});
});
</script>
```
解释一下上面的代码:
首先,我们需要一个触发模态框的按钮,这里我们使用了Bootstrap提供的按钮样式,设置了data-toggle和data-target属性,分别表示点击按钮时打开模态框的方式和目标模态框的ID。
接着,我们定义了一个ID为exampleModal的模态框,其中包含了一个模态框对话框(modal-dialog)和一个模态框内容(modal-content),以及模态框头部(modal-header)、模态框主体(modal-body)和模态框底部(modal-footer)三个部分。
在模态框头部部分,我们定义了一个标题,以及一个关闭按钮,点击关闭按钮可以关闭模态框。
接下来,在模态框主体部分,我们使用了一个表单元素,包含了三个表单项:姓名、邮箱和电话。这里只是一个示例表单,实际应用中可以根据需求添加更多表单项。表单元素还添加了name属性,用于后面的jQuery选择器。
最后,在模态框底部部分,我们定义了一个关闭按钮和一个保存按钮,点击关闭按钮可以关闭模态框,点击保存按钮可以保存表单数据。保存按钮添加了一个点击事件,用于发送POST请求,将表单数据添加到后台数据库中。请求成功后,关闭模态框并刷新页面;请求失败时,输出错误信息。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)