質問編集履歴
4
エラー解消について追記しました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -305,3 +305,13 @@
|
|
305
305
|
最後の2つは上部メニューをスクロールした時に消えるように設定しているのですが、そのエラーのようです。
|
306
306
|
|
307
307
|
![イメージ説明](b6b8bfa3b2b55cf2413826acbf828e65.png)
|
308
|
+
|
309
|
+
**★2019/5/30追記**
|
310
|
+
|
311
|
+
上記エラーは解消しましたが、以前として表示されません。
|
312
|
+
|
313
|
+
[Bootstrapのモーダル機能で多重表示する際に解決しなければならない2つの問題](http://yebisupress.dac.co.jp/2018/06/11/tips_when_using_bootstrap_multiple_modal_overaly/)
|
314
|
+
|
315
|
+
こちらの記事も参照しましたが、z-indexの大小を正しく設定しても解消されず。。。
|
316
|
+
|
317
|
+
[モーダル bootstrap4移行ガイド](https://cccabinet.jpn.org/bootstrap4/components/modal)に書いてある「Bootstrapは一度に1つのモーダルウィンドウしかサポートしない。入れ子になったモーダルは、ユーザー経験が乏しいと思われるためサポートされていない。」から察するに、今回入れ子構造にはしていないもののそれが関係しているのかなと考えています...
|
3
ヘッダーの修正コードを追加しました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -106,6 +106,38 @@
|
|
106
106
|
|
107
107
|
```
|
108
108
|
|
109
|
+
「header.js」スクロールするとヘッダー部分が消えるようにしている
|
110
|
+
|
111
|
+
```javascript
|
112
|
+
|
113
|
+
var startPos = 0, winScrollTop = 0;
|
114
|
+
|
115
|
+
$(window).on('scroll', function () {
|
116
|
+
|
117
|
+
winScrollTop = $(this).scrollTop();
|
118
|
+
|
119
|
+
if (winScrollTop >= startPos) {
|
120
|
+
|
121
|
+
if (winScrollTop >= 200) {
|
122
|
+
|
123
|
+
$('.site-header').addClass('hide');
|
124
|
+
|
125
|
+
}
|
126
|
+
|
127
|
+
} else {
|
128
|
+
|
129
|
+
$('.site-header').removeClass('hide');
|
130
|
+
|
131
|
+
}
|
132
|
+
|
133
|
+
startPos = winScrollTop;
|
134
|
+
|
135
|
+
});
|
136
|
+
|
137
|
+
|
138
|
+
|
139
|
+
```
|
140
|
+
|
109
141
|
モーダルウインドウの中身部分「users/_follow_list.html.erb」
|
110
142
|
|
111
143
|
```html
|
2
モーダルのCSS検証画面を追加しました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -154,10 +154,14 @@
|
|
154
154
|
|
155
155
|
```
|
156
156
|
|
157
|
-
|
157
|
+
.modal-backdropのCSS
|
158
158
|
|
159
159
|
![イメージ説明](1ea67df995f6b43e23e3dd11307f9ba2.png)
|
160
160
|
|
161
|
+
.modalのCSS
|
162
|
+
|
163
|
+
![イメージ説明](51dc96a4a4600ebcc3e71db01ea19450.png)
|
164
|
+
|
161
165
|
###正常に動く部分のソースコード
|
162
166
|
|
163
167
|
|
@@ -242,8 +246,14 @@
|
|
242
246
|
|
243
247
|
正常に動くページの検証画面
|
244
248
|
|
249
|
+
.modal-backtdropのCSS
|
250
|
+
|
245
251
|
![CSS](a7b1d03838bbaadae0812f1d43346376.png)
|
246
252
|
|
253
|
+
.modalのCSS
|
254
|
+
|
255
|
+
![イメージ説明](a761cb0afac793327a5e3e1157a58734.png)
|
256
|
+
|
247
257
|
### 考えられる理由
|
248
258
|
|
249
259
|
先に正常に表示できている部分(画像クリックで開く機能)の実装をし、そこで使ったコードをほぼ流用してフォローリストのモーダル部分を作ったため、先に作ったやつが何らか邪魔をしているのかな・・・と思います。
|
1
回答者様への追記
test
CHANGED
File without changes
|
test
CHANGED
@@ -253,3 +253,13 @@
|
|
253
253
|
|
254
254
|
|
255
255
|
どなたか教えていただけると幸いです。
|
256
|
+
|
257
|
+
|
258
|
+
|
259
|
+
**コンソールにたまっているエラーについて(回答者さんへの追加情報)**
|
260
|
+
|
261
|
+
確認したところ、上1つは別のページで起こるエラー、GETのエラーは常に出てしまうもので未解決、
|
262
|
+
|
263
|
+
最後の2つは上部メニューをスクロールした時に消えるように設定しているのですが、そのエラーのようです。
|
264
|
+
|
265
|
+
![イメージ説明](b6b8bfa3b2b55cf2413826acbf828e65.png)
|