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

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

新規登録して質問してみよう
ただいま回答率
87.20%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

モーダルを中央に表示したい

.ryou
.ryou

総合スコア21

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0評価

0クリップ

6385閲覧

投稿2020/09/04 03:17

編集2020/09/04 03:27

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
新規登録とログインのモーダルを作っています。
画面幅が1440pxの場合に中央に表示されるよう設定されているので、他の幅に変えると見栄えが悪く、スマートフォンだと全て表示できなくなってしまいます。
どうしたら画面の大きさを変更しても中央に表示できるか教えて頂きたく、質問致しました。
また、モーダル表示のボタンを押すとページのトップにスクロールしてしまうので、それもどうしたら解決できるか教えて頂きたいです。
エラーメッセージはありません。
よろしくお願いいたします。

該当のソースコード

HTML

<header> <div class="container"> <div class="header-right"> <a href="#" class="signup-show">新規登録</a> <a href="#" class="login login-show">ログイン</a> </div> </div> </header> <!--ログインモーダル--> <div id="login-modal" class="login-modal-wrapper"> <div class="modal"> <div class="close-modal"> <i class="fa fa-2x fa-times"></i> </div> <div id="login-form"> <h2>Emailログイン</h2> <form action="#"> <input class="form-control" type="text" placeholder="メールアドレス"> <input class="form-control" type="password" placeholder="パスワード"> <div id="submit-btn">ログイン</div> </form> </div> </div> </div> <!--新規登録モーダル--> <div class="signup-modal-wrapper" id="signup-modal"> <div class="modal"> <div class="close-modal"> <i class="fa fa-2x fa-times"></i> </div> <div id="signup-form"> <h2>Emailで新規登録</h2> <form action="#"> <input class="form-control" type="text" placeholder="メールアドレス"> <input class="form-control" type="password" placeholder="パスワード"> <div id="submit-btn">新規登録</div> </form> </div> </div> </div>

CSS

/*ログインモーダル*/ .login-modal-wrapper, .signup-modal-wrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 5; display: none; } .modal { position: absolute; top: 20%; left: 34%; background-color: #e6ecf0; padding: 20px 0 40px; border-radius: 10px; width: 450px; height: auto; text-align: center; } .modal .fa-times { position: absolute; top: 12px; right: 12px; color: rgba(128, 128, 128, 0.46); cursor: pointer; } #signup-form, #login-form { width: 100%; } #signup-form h2, #login-form h2 { color: #5f5d60; letter-spacing: 1px; margin-bottom: 40px; } #signup-form input, #login-form input { width: 320px; margin-bottom: 20px; font-size: 12px; padding: 12px 12px; border: 1px solid #d0d5d8; border-radius: 5px; } #submit-btn { display: inline-block; padding: 14px 140px; background-color: #5dca88; border: none; border-radius: 3px; color: white; margin: 10px auto; cursor: pointer; }

jQuery

//新規登録モーダル クリックイベント $('.signup-show').click(function(){ $('#signup-modal').fadeIn(); $('.modal-overlay').addClass('.open'); }); //モーダル非表示 $('.close-modal').click(function(){ $('#login-modal').fadeOut(); $('#signup-modal').fadeOut(); }); $('.modal-overlay').click(function(){ $('#login-modal').fadeOut(); $('#signup-modal').fadeOut(); $('.modal-overlay').removeClass('open'); $('.open').css('transition-duration', '5s'); });

補足情報

足りない情報等ございましたら、教えていただければ幸いです。
追記致します。
ご回答お待ちしております。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。