用原生JavaScript写一个带表单的弹出框,点击表单中的确定,弹出框关闭
时间: 2024-05-15 07:15:09 浏览: 13
HTML代码:
```html
<button id="openDialog">打开弹出框</button>
<div id="dialog" style="display: none;">
<form>
<label>
姓名:
<input type="text" name="name">
</label>
<br>
<label>
年龄:
<input type="number" name="age">
</label>
<br>
<button type="submit">确定</button>
</form>
</div>
```
JavaScript代码:
```javascript
var openDialogBtn = document.getElementById('openDialog');
var dialog = document.getElementById('dialog');
var form = dialog.querySelector('form');
// 点击打开弹出框按钮
openDialogBtn.addEventListener('click', function() {
dialog.style.display = 'block';
});
// 提交表单
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
dialog.style.display = 'none'; // 关闭弹出框
});
```