質問編集履歴

4

エラー解消について追記しました。

2019/05/30 00:00

投稿

natecosan
natecosan

スコア23

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

ヘッダーの修正コードを追加しました。

2019/05/30 00:00

投稿

natecosan
natecosan

スコア23

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検証画面を追加しました。

2019/05/25 09:09

投稿

natecosan
natecosan

スコア23

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

回答者様への追記

2019/05/25 09:05

投稿

natecosan
natecosan

スコア23

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)