html实现弹窗编辑资料,《小白HTML5成长之路33》自定义弹窗修改弹窗内容实现方法...
时间: 2023-07-15 14:13:28 浏览: 41
要实现弹窗编辑资料,可以使用HTML5的弹窗组件,同时使用JavaScript代码来处理弹窗的显示和隐藏。
以下是一个简单的示例代码:
HTML部分:
```
<button onclick="openEditDialog()">编辑资料</button>
<div id="editDialog" style="display: none;">
<h2>编辑资料</h2>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">年龄:</label>
<input type="text" id="age" name="age"><br><br>
<button type="button" onclick="saveData()">保存</button>
<button type="button" onclick="closeEditDialog()">取消</button>
</form>
</div>
```
JavaScript部分:
```
function openEditDialog() {
document.getElementById("editDialog").style.display = "block";
}
function closeEditDialog() {
document.getElementById("editDialog").style.display = "none";
}
function saveData() {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
// 在这里保存数据
closeEditDialog();
}
```
在示例代码中,点击“编辑资料”按钮时,会调用openEditDialog()函数来显示弹窗。弹窗的内容在一个id为“editDialog”的div元素中定义。点击弹窗中的“保存”按钮时,会调用saveData()函数来保存数据,并且调用closeEditDialog()函数来隐藏弹窗。点击弹窗中的“取消”按钮时,也会调用closeEditDialog()函数来隐藏弹窗。
可以根据实际需求来修改弹窗的样式和内容,并且在saveData()函数中添加保存数据的代码。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![xlsx](https://img-home.csdnimg.cn/images/20210720083732.png)
![unitypackage](https://img-home.csdnimg.cn/images/20210720083646.png)