回答編集履歴
1
追記
test
CHANGED
|
@@ -53,3 +53,45 @@
|
|
|
53
53
|
</div>
|
|
54
54
|
</div>
|
|
55
55
|
```
|
|
56
|
+
|
|
57
|
+
素のjsでやるならdialogタグをつかってください
|
|
58
|
+
```javascript
|
|
59
|
+
<script>
|
|
60
|
+
window.addEventListener('DOMContentLoaded', ()=>{
|
|
61
|
+
btn.addEventListener('click',()=>{
|
|
62
|
+
if(!document.querySelector('.cb01:checked')){
|
|
63
|
+
cb.showModal();
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
document.querySelector('#cb .ok').addEventListener('click',({target})=>{
|
|
67
|
+
cb.close();
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
</script>
|
|
71
|
+
<dialog class="cb" id="cb">
|
|
72
|
+
選択してください
|
|
73
|
+
<hr>
|
|
74
|
+
<input type="button" value="OK" class="ok">
|
|
75
|
+
</dialog>
|
|
76
|
+
|
|
77
|
+
<div class="btn">
|
|
78
|
+
<button type="button" id="btn" class="btn01" name="check-btn">押す</button>
|
|
79
|
+
</div>
|
|
80
|
+
<ul>
|
|
81
|
+
<li>
|
|
82
|
+
<span>
|
|
83
|
+
<input type="checkbox" class="cb01" id="pl01" name="select" value="あ">
|
|
84
|
+
<label for="pl01" class="select">a</label></span>
|
|
85
|
+
</li>
|
|
86
|
+
<li>
|
|
87
|
+
<span>
|
|
88
|
+
<input type="checkbox" class="cb01" id="pl02" name="select" value="い">
|
|
89
|
+
<label for="pl02" class="select">b</label></span>
|
|
90
|
+
</li>
|
|
91
|
+
<li>
|
|
92
|
+
<span>
|
|
93
|
+
<input type="checkbox" class="cb01" id="pl03" name="select" value="う">
|
|
94
|
+
<label for="pl03" class="select">c</label></span>
|
|
95
|
+
</li>
|
|
96
|
+
</ul>
|
|
97
|
+
```
|