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

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

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

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

1738閲覧

Bootstrap4.5でのModalについて

masterofpuppets

総合スコア12

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2020/05/22 04:31

編集2020/05/22 07:59

お世話になっております。
Bootstrap4.0 + JQuery3.1.1で以下の様なカード形式からモーダル表示するhtmlにつきまして、
この度Bootstrap4.5 + JQuery3.5.1にアップグレードしたところ、
特にエラーを吐くわけでもなくモーダル表示が動かなくなってしまいました。

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="ja"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>社員一覧</title> <link href="bootstrap.css" rel="stylesheet"> <script src="modernizr-2.6.2.js"></script> <style type="text/css"> .wrap { overflow: hidden; } </style> </head> <body> <div class="wrap"> <div class="container-fluid body-content"> <h5>社員一覧</h5> <div class="row my-flex-card"> <div class="col-lg-3 col-md-4 col-sm-4"> <div class="card card-col"> <div class="card-block"> <h6 class="card-title"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#1000">天堂 浬</button> </h6> <p class="card-text">080-1234-5678</p> <p class="card-text">hoge1@gmail.com</p> <div class="modal" id="1000" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">天堂 浬</h5> </div> <div class="modal-body"> <ul class="list-group"> <li class="list-group-item">住所:東京都世田谷区</li> </ul> </div> <div class="modal-footer"> <button type="button" class="btn btn-link" data-dismiss="modal">閉じる</button> </div> </div> </div> </div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-4"> <div class="card card-col"> <div class="card-block"> <h6 class="card-title"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#1500">佐倉 七瀬</button> </h6> <p class="card-text">080-5678-1234</p> <p class="card-text">hoge2@gmail.com</p> <div class="modal" id="1500" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">佐倉 七瀬</h5> </div> <div class="modal-body"> <ul class="list-group"> <li class="list-group-item">住所:東京都千代田区</li> </ul> </div> <div class="modal-footer"> <button type="button" class="btn btn-link" data-dismiss="modal">閉じる</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script src="jquery-3.1.1.js"></script> <script src="popper.js"></script> <script src="bootstrap.js"></script> </body> </html>

modalを開く為のjavascriptは使用しておりません。
Bootstrap4.0ではmodal表示出来ていたのですが、4.5に変わったことにより何か追記すべきところがあるのか等、
色々と調べてみたのですが、現時点で八方塞がり状態です。
是非、ご指摘等頂戴できれば幸いです。
何卒よろしくお願い申し上げます。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2020/05/22 07:05 編集

元に戻す・・・という選択肢はないのでしょうね。 ASP.NET の影響を一切排除して、html, javascript, css だけで問題を再現できるサンプルを書けるのであれば、それをアップして、純粋に Bootstrap4.5,jquery3.5.1 の質問として聞いてはいかがですか? その方が回答が集まりやすいと思いますので。 また、そういうサンプルを作る過程で問題の切り分けができるので、その過程で原因が見つかって自己解決できるということも期待できそうですし。 ASP.NET が絡むと、ASP.NET が分かる人に Bootstrap4.5,jquery3.5.1 を導入してもらって問題を再現してもらうという話になるかと思いますが、それはなかなか難しい話だと思います。実際自分はそこまでやる気力は沸いてきませんし。
masterofpuppets

2020/05/22 07:13

ご指摘誠にありがとうございます。 htmlベースで書いたものを、質問に追記させていただきます。 それとも新規で質問を挙げた方がよろしいでしょうか。 よろしくお願い申し上げます。
退会済みユーザー

退会済みユーザー

2020/05/22 07:18

> それとも新規で質問を挙げた方がよろしいでしょうか。 そのあたりは質問者さんのご自由にしていただいていいと思います。しばらく待ってレス・回答が付かなければ、ここはクローズして新規に質問した方がよさそうな気はしますが。
masterofpuppets

2020/05/22 08:01

返信が遅くなってしまい誠に申し訳ございません。 htmlで書き直し(勿論動く事を確認の上)、当初投稿させていただいた内容を編集させていただきました。 何卒よろしくお願い申し上げます。
guest

回答1

0

自己解決

試行錯誤の末、下記の箇所を変更した結果、正常にmodal表示が出来ました。
0. data-target="#1000" → data-target="#modal1000"
0. <div class="modal" id="1000" tabindex="-1" role="dialog"> のidを"modal1000"

Bootstrap4.5ですと、どうも数値だと上手く動かないようです。

大変お騒がせして申し訳ございません。
以上、ご報告させていただきます。

投稿2020/05/22 17:30

masterofpuppets

総合スコア12

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問