x
1
<dialog open id="fav-dialog">
2
<form method="dialog">
3
<section>
4
<p><label for="fav-animal">喜欢的动物:</label>
5
<select id="fav-animal">
6
<option></option>
7
<option>盐水虾</option>
8
<option>小熊猫</option>
9
<option>蜘蛛猴</option>
10
</select></p>
11
</section>
12
<menu>
13
<button id="cancel" type="reset">取消</button>
14
<button type="submit">确认</button>
15
</menu>
16
</form>
17
</dialog>
18
19
<menu>
20
<button id="update-details">更新详情</button>
21
</menu>
22
23
<script>
24
(function() {
25
var updateButton = document.getElementById('update-details');
26
var cancelButton = document.getElementById('cancel');
27
var favDialog = document.getElementById('fav-dialog');
28
29
// 点击按钮打开模态对话框
30
updateButton.addEventListener('click', function() {
31
favDialog.showModal();
32
});
33
34
// 点击表单取消按钮关闭对话框
35
cancelButton.addEventListener('click', function() {
36
favDialog.close();
37
});
38
})();
39
</script>
40