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

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

ただいまの
回答率

87.49%

bootstrap modalが開いた後のフリーズを解消したいです

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 608

score 9

ボタンを押すとmodalが表示されるボタンを作りたいのですが、表示はするもののそのまま画面がフリーズしてしまいます。
ほぼコピペなのでコードが原因ではないことも考え、近くのコードも消しては付け直したりしたのですが
解決できませんでした。
何かアドバイスなどあればお願いします。

対象のソースコードが

<button type="button" class="btn btn-danger mr-4" data-toggle="modal" data-target="#hd-modal">はじめる</button>
 <html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/434bcc9383.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/main.css" />

    <title>Boot strap1</title>
  </head>
  <body>
      <header>
      <!-- <nav class="navbar navbar-fixed-top" role="navigation"></nav> -->
      <!-- nav fixed-topで上部固定ができる -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light nav fixed-top">
          <a class="navbar-brand" href="https://www.airbnb.jp/">
            <svg width="1.3em" height="1.3em" viewBox="0 0 16 16" class="bi bi-suit-club" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M8 1a3.25 3.25 0 0 0-3.25 3.25c0 .186 0 .29.016.41.014.12.045.27.12.527l.19.665-.692-.028a3.25 3.25 0 1 0 2.357 5.334.5.5 0 0 1 .844.518l-.003.005-.006.015-.024.055a21.893 21.893 0 0 1-.438.92 22.38 22.38 0 0 1-1.266 2.197c-.013.018-.02.05.001.09.01.02.021.03.03.036A.036.036 0 0 0 5.9 15h4.2c.01 0 .016-.002.022-.006a.092.092 0 0 0 .029-.035c.02-.04.014-.073.001-.091a22.875 22.875 0 0 1-1.704-3.117l-.024-.054-.006-.015-.002-.004a.5.5 0 0 1 .838-.524c.601.7 1.516 1.168 2.496 1.168a3.25 3.25 0 1 0-.139-6.498l-.699.03.199-.671c.14-.47.14-.745.139-.927V4.25A3.25 3.25 0 0 0 8 1zm2.207 12.024c.225.405.487.848.78 1.294C11.437 15 10.975 16 10.1 16H5.9c-.876 0-1.338-1-.887-1.683.291-.442.552-.88.776-1.283a4.25 4.25 0 1 1-2.007-8.187 2.79 2.79 0 0 1-.009-.064c-.023-.187-.023-.348-.023-.52V4.25a4.25 4.25 0 0 1 8.5 0c0 .14 0 .333-.04.596a4.25 4.25 0 0 1-.46 8.476 4.186 4.186 0 0 1-1.543-.298z"/>
            </svg>
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav hd-nav">
              <a class="nav-item nav-link active hd-nav__item" href="#">概要<span class="sr-only">(current)</span></a>
              <a class="nav-item nav-link hd-nav__item" href="https://www.airbnb.jp/d/setup">準備</a>
              <a class="nav-item nav-link hd-nav__item" href="https://www.airbnb.jp/d/safety">安全</a>
              <a class="nav-item nav-link hd-nav__item" href="https://www.airbnb.jp/d/financials">マネープラン</a>
            </div>
          </div>
          <!-- <button>modal -->
          <button type="button" class="btn btn-danger mr-4" data-toggle="modal" data-target="#hd-modal">はじめる</button>
          <div class="modal" id="hd-modal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">ログイン</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>
        </nav>

        <div class="card">
          <div class="container-fluid header__card" id="hd-img"></div>
                <img class="card-img" src="https://picsum.photos/seed/picsum/1200/555/" alt="#">
                <div class="header__nav"></div>
        </div>

          <div class="container hd-card">
            <div class="row">
              <div class="hd-catch">
                  <div class="hd-catch__left col-lg-7 col-md-10">
                    <h1>予想最高ホスティング収入額</h1>
                      <p class="texts">
                        <span>週あたり¥60,615</span>
                        <span>月あたり¥98,968</span>
                        <span>年あたり¥1,177,968</span>
                        <span>10年あたり¥13,198,968</span>
                      </p>
                    <h1>NaganoのAirbnbホストとして</h1>
                  </div>

                <div class="hd-catch__right col-lg-5 col-md-10">
                    <form>
                      <div class="form-group">
                        <label for="exampleInputEmail1">どれくらいの収益が見込めるかみていきましょう</label>
                        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="宿泊施設の所在地">
                      </div>
                  <div class="row">
                      <div class="dropdown col-lg-6 col-md-10">
                        <button class="btn btn-light dropdown-toggle"
                                type="button" id="dropdownMenu1" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                まるまる貸し切り
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                          <a class="dropdown-item" href="#!">個室</a>
                          <a class="dropdown-item" href="#!">シェアルーム</a>
                        </div>
                      </div>

                    <div class="dropdown col-lg-6 col-md-10">
                      <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        ゲスト4人
                      </button>
                      <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <a class="dropdown-item" href="#!">ゲスト1人</a>
                        <a class="dropdown-item" href="#!">ゲスト2人</a>
                        <a class="dropdown-item" href="#!">ゲスト3人</a>
                        <a class="dropdown-item" href="#!">ゲスト4人</a>
                        <a class="dropdown-item" href="#!">ゲスト5人</a>
                        <a class="dropdown-item" href="#!">ゲスト6人</a>
                        <a class="dropdown-item" href="#!">ゲスト7人</a>
                        <a class="dropdown-item" href="#!">ゲスト8人</a>
                        <a class="dropdown-item" href="#!">ゲスト9人</a>
                        <a class="dropdown-item" href="#!">ゲスト10人</a>
                        <a class="dropdown-item" href="#!">ゲスト11人</a>
                        <a class="dropdown-item" href="#!">ゲスト12人</a>
                        <a class="dropdown-item" href="#!">ゲスト13人</a>
                        <a class="dropdown-item" href="#!">ゲスト14人</a>
                        <a class="dropdown-item" href="#!">ゲスト15人</a>
                        <a class="dropdown-item" href="#!">ゲスト16人</a>
                      </div>
                    </div> 
                    <button type="button" class="btn btn-danger btn-lg btn block hd-entry">はじめる</button>  
                  </div>
              </div>
            </div>
        </div>
      </div>
      </header>
        <div class="container hd-section">
          <div class="row justify-content-center">
            <div class="col-xl-5 col-md-8 hd-section__left">
              <h1>Airbnbでホストするこれだけの理由</h1>
              <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p>
            </div>
            <div class="col-xl-5 col-md-8 hd-section__right">
              <h1>困ったときも安心</h1>
              <p>万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
            </div>
          </div>
        </div>





    <script src="src/index.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2020/10/14 22:14 編集

    Bootstrap4.5.2 / Chrome最新で再現できませんでした。
    普通にモーダルにある「×」を押せば閉じますしフリーズしている感はありません。
    Bootstrapのバージョン、利用しているブラウザ 提示いただけますでしょうか。
    あとできれば、コードは全体を。

    キャンセル

  • cheetoi

    2020/10/14 22:36

    ありがとうございます。
    バージョンがbootstrap4 、ブラウザはvscodeです。
    以下が近辺のコードとなります。
    <nav class="navbar navbar-expand-lg navbar-light bg-light nav fixed-top">
    <a class="navbar-brand" href="https://www.airbnb.jp/">
    <svg width="1.3em" height="1.3em" viewBox="0 0 16 16" class="bi bi-suit-club" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M8 1a3.25 3.25 0 0 0-3.25 3.25c0 .186 0 .29.016.41.014.12.045.27.12.527l.19.665-.692-.028a3.25 3.25 0 1 0 2.357 5.334.5.5 0 0 1 .844.518l-.003.005-.006.015-.024.055a21.893 21.893 0 0 1-.438.92 22.38 22.38 0 0 1-1.266 2.197c-.013.018-.02.05.001.09.01.02.021.03.03.036A.036.036 0 0 0 5.9 15h4.2c.01 0 .016-.002.022-.006a.092.092 0 0 0 .029-.035c.02-.04.014-.073.001-.091a22.875 22.875 0 0 1-1.704-3.117l-.024-.054-.006-.015-.002-.004a.5.5 0 0 1 .838-.524c.601.7 1.516 1.168 2.496 1.168a3.25 3.25 0 1 0-.139-6.498l-.699.03.199-.671c.14-.47.14-.745.139-.927V4.25A3.25 3.25 0 0 0 8 1zm2.207 12.024c.225.405.487.848.78 1.294C11.437 15 10.975 16 10.1 16H5.9c-.876 0-1.338-1-.887-1.683.291-.442.552-.88.776-1.283a4.25 4.25 0 1 1-2.007-8.187 2.79 2.79 0 0 1-.009-.064c-.023-.187-.023-.348-.023-.52V4.25a4.25 4.25 0 0 1 8.5 0c0 .14 0 .333-.04.596a4.25 4.25 0 0 1-.46 8.476 4.186 4.186 0 0 1-1.543-.298z"/>
    </svg>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav hd-nav">
    <a class="nav-item nav-link active hd-nav__item" href="#">概要<span class="sr-only">(current)</span></a>
    <a class="nav-item nav-link hd-nav__item" href="https://www.airbnb.jp/d/setup">準備</a>
    <a class="nav-item nav-link hd-nav__item" href="https://www.airbnb.jp/d/safety">安全</a>
    <a class="nav-item nav-link hd-nav__item" href="https://www.airbnb.jp/d/financials">マネープラン</a>
    </div>
    </div>
    <!-- <button>modal -->
    <button type="button" class="btn btn-danger mr-4" data-toggle="modal" data-target="#hd-modal">はじめる</button>
    <div class="modal" id="hd-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
    <h5 class="modal-title">ログイン</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="modal-body">
    <p>Modal body text goes here.</p>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
    </div>
    </div>
    </div>
    </div>
    </nav>

    キャンセル

  • m.ts10806

    2020/10/14 22:40

    質問は編集できますので、質問本文に反映してください。

    キャンセル

  • m.ts10806

    2020/10/15 09:44

    「コード全体」なので、できればDoctype宣言から</html>まであると助かります。
    コピペで現象確認できないと答えようがありませんので。
    もし自身で組んだCSSやJavaScriptもあればそれもご提示ください。

    キャンセル

回答 1

checkベストアンサー

0

modalのコードは閉じるbodyの直前(scriptがあるなら、その前)に記述してください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/10/16 17:29

    <body>の直前に書くことで解決できました!
    ありがとうございます。

    キャンセル

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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