質問編集履歴
4
コード3追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -118,3 +118,19 @@
|
|
|
118
118
|
```
|
|
119
119
|
とすることでshowPopover()でも任意に指定したボタンの傍に表示させることができるようになりました。
|
|
120
120
|
|
|
121
|
+
### 得られた回答を参考に実現できたコード 3
|
|
122
|
+
[5/16 18:55 追記]
|
|
123
|
+
showPopoverの引数で指定できる!!!
|
|
124
|
+
|
|
125
|
+
```javascript
|
|
126
|
+
document.querySelector("#btnFail").addEventListener("click", async (ev) => {
|
|
127
|
+
|
|
128
|
+
const btn = ev.currentTarget;
|
|
129
|
+
btn.innerText = "処理中";
|
|
130
|
+
|
|
131
|
+
const result = await new Promise((r) => setTimeout(r, 1000, (Math.random() < 0.5)));
|
|
132
|
+
const pop = document.querySelector(result ? "#pop1" : "#pop2");
|
|
133
|
+
pop.showPopover({ source: btn });
|
|
134
|
+
});
|
|
135
|
+
```
|
|
136
|
+
|
3
実現できたコード２を追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -84,5 +84,37 @@
|
|
|
84
84
|
btn.removeAttribute("popovertarget");
|
|
85
85
|
});
|
|
86
86
|
```
|
|
87
|
+
### 得られた回答を参考に実現できたコード 2
|
|
88
|
+
[5/16 18:20 追記]
|
|
89
|
+
HTMLとCSSでの関連は、styleに`position-anchor`と`position-name`の値が一致する組み合わせをつければ良さそうなので、HTMLで書くと以下のように。
|
|
87
90
|
|
|
91
|
+
```html
|
|
92
|
+
<div id="pop1"
|
|
93
|
+
style="position-anchor: --testAnchor; margin:0; inset:0; position-area:top; background-color: green; color: white;"
|
|
94
|
+
popover>
|
|
95
|
+
<div>合格</div>
|
|
96
|
+
</div>
|
|
97
|
+
<button id="btnFail" style="anchor-name:--testAnchor; margin:100px;">
|
|
98
|
+
<span>2</span>
|
|
99
|
+
</button>
|
|
100
|
+
```
|
|
88
101
|
|
|
102
|
+
これをjavascriptで実現すると
|
|
103
|
+
|
|
104
|
+
```javascript
|
|
105
|
+
document.querySelector("#btnFail").addEventListener("click", async (ev) => {
|
|
106
|
+
|
|
107
|
+
const btn = ev.currentTarget;
|
|
108
|
+
btn.innerText = "処理中";
|
|
109
|
+
|
|
110
|
+
const result = await new Promise((r) => setTimeout(r, 1000, (Math.random() < 0.5)));
|
|
111
|
+
const pop = document.querySelector(result ? "#pop1" : "#pop2");
|
|
112
|
+
|
|
113
|
+
const anchorName = "--testAnchor" + Date.now().toString();
|
|
114
|
+
btn.style.anchorName = anchorName;
|
|
115
|
+
pop.style.positionAnchor = anchorName;
|
|
116
|
+
pop.showPopover();
|
|
117
|
+
});
|
|
118
|
+
```
|
|
119
|
+
とすることでshowPopover()でも任意に指定したボタンの傍に表示させることができるようになりました。
|
|
120
|
+
|
2
実現できたコードを追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -56,3 +56,33 @@
|
|
|
56
56
|
edge 136
|
|
57
57
|
(firefoxではまったく位置が合わない、safariでは試せていないが、今回の質問ではchromium系のみでよい)
|
|
58
58
|
|
|
59
|
+
|
|
60
|
+
### 得られた回答を参考に実現できたコード
|
|
61
|
+
[5/16 17:53 追記]
|
|
62
|
+
クリックされた(スクリプト処理後の)時点での対象の`popovertarget`属性で判定されるようなので、非同期のawaitしてしまうと成功しませんでしたが、属性を書き換えてからclick()を呼び出すことで遅延させることができました。
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
document.querySelector("#btnFail").addEventListener("click", async (ev) => {
|
|
66
|
+
|
|
67
|
+
const btn = ev.currentTarget;
|
|
68
|
+
|
|
69
|
+
if (btn.hasAttribute("popovertarget")) {
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
btn.innerText = "処理中";
|
|
74
|
+
const result = await new Promise((r) => setTimeout(r, 1000, (Math.random() < 0.5)));
|
|
75
|
+
btn.innerText = result ? "合格" : "不合格";
|
|
76
|
+
if (result) {
|
|
77
|
+
btn.setAttribute("popovertarget", "pop1");
|
|
78
|
+
}
|
|
79
|
+
else {
|
|
80
|
+
btn.setAttribute("popovertarget", "pop2");
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
btn.click();
|
|
84
|
+
btn.removeAttribute("popovertarget");
|
|
85
|
+
});
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
|
1
実現したいことの理由を追記。codeブロックの言語指定を大文字"HTML"から小文字"html"に。微妙なtypo修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
### 実現したいこと
|
|
2
2
|
HTMLのbuttonをクリックしたときに、そのbuttonの傍にpopover属性を指定した要素を表示させたい。
|
|
3
3
|
表示/非表示はjavascriptで制御する。
|
|
4
|
+
|
|
5
|
+
[5/16 17:33 追記]
|
|
6
|
+
javascriptで制御したい理由は、buttonをクリックされたら実行されるjavascriptの処理結果に応じてpopoverを表示するかしないかを変えたい、あるいは表示内容を変更したいからです。
|
|
4
7
|
|
|
5
8
|
### 発生している問題・分からないこと
|
|
6
9
|
Javascriptを使用せずに自動的に表示させる場合には、buttonの傍に表示されます。
|
|
@@ -13,7 +16,7 @@
|
|
|
13
16
|
|
|
14
17
|
### 該当のソースコード
|
|
15
18
|
|
|
16
|
-
```
|
|
19
|
+
```html
|
|
17
20
|
<div style="position: relative;">
|
|
18
21
|
|
|
19
22
|
<div id="pop1" style="margin:0; inset:0; position-area:top;" popover >
|
|
@@ -24,7 +27,7 @@
|
|
|
24
27
|
<span>意図した通りの要素の上になる</span>
|
|
25
28
|
</button>
|
|
26
29
|
|
|
27
|
-
<button id="btnFail" tyle="margin:100px;">
|
|
30
|
+
<button id="btnFail" style="margin:100px;">
|
|
28
31
|
<span>画面下になってしまう</span>
|
|
29
32
|
</button>
|
|
30
33
|
|