質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

8722閲覧

モーダルから元のスクロール位置に戻したい

watarutaru

総合スコア6

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/05/17 10:22

編集2018/05/24 03:09

HTML、CSSの知識はありますが、
jQueryおよびjQueryプラグインの使用に関しては初心者です。
プラグインを用いたモーダルの実装について意図した挙動が上手く行かず、
下記質問させていただければと思います。どうぞよろしくお願いいたします。

前提・実現したいこと

・jQueryプラグインの「Modaal」を使用してモーダルを実装する。
・モーダル起動→モーダル閉じる操作後、元のページの起動前スクロール位置と同じ位置に戻したい。
参考:使用プラグイン「Modaal」 http://www.humaan.com/modaal/

★スマートフォンブラウザ(iOS / Safari)で実現ができていません。
(PCブラウザの場合、ブラウザデフォルトの位置記憶?で戻ってくれる)

発生している問題・エラーメッセージ

・モーダル起動時、背景のページは起動前のスクロール位置のまま。
・閉じるボタン押下後にページの頭にスクロール位置が戻り表示される。

該当のソースコード

html

1 <footer id="footer"> 2 <a class="modal" href="#modal">お問い合わせ</a> 3 </footer> 4 5 <div id="modal" style="display:none;"> 6 <h2 class="modalh2">お問い合わせ</h2> 7 <form> 8      略 9 </form> 10 </div>

javascript

1 <script> 2 $('.modal').modaal({}); 3 </script>

試したこと

スイッチとなる要素(class="modal")に下記CSSを記述

CSS

1.modal { position : static; }

補足情報(FW/ツールのバージョンなど)

jsファイルはプラグインの配布されているGithubからダウンロードして、サイト内ディレクトリから読み込んでいます。
配布元のDEMOでは、特にオプション等の機能を利用しなくても元のスクロール位置に戻れているようなので、原因が特定できず困っております。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/05/17 11:53 編集

タグにある情報はタイトルに入れなくても良いですよ。冒頭にあると、一覧から見たときに文字数の関係から要件部分が全て表示されなくなります。 また、jQueryのバージョン、現象が確認されたブラウザ(PCも)を追記してください。
m.ts10806

2018/05/17 11:54 編集

Chromeのデバイス確認でスマホ表示を確認しましたが再現しませんでした。htmlコードも全体提示された方が良いかもしれません。
x_x

2018/05/22 05:45

略すのはいいのですが、肝心の閉じるボタンのところが書かれていません。
watarutaru

2018/05/24 03:08

ご指摘やご確認、ありがとうございます。原因はプラグインで配布されているCSSを上書きしてしまっていたことでした。ご指摘どおり該当箇所のみでは正しく動作する状態でしたので、次回以降全量公開するように意識します。
guest

回答1

0

自己解決

原因は、記載していない部分で配布されているプラグインのCSSを上書きしてしまっていたことでした。
(全量公開できておらず申し訳ございません。)

body要素自体のCSSで position と overflow の設定を行っていたため、スクロール位置が固定されずにページトップに戻ってしまっておりました。

投稿2018/05/24 03:12

watarutaru

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問