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

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

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

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Q&A

0回答

5860閲覧

cshtmlでモーダルを開く方法

退会済みユーザー

退会済みユーザー

総合スコア0

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

0グッド

0クリップ

投稿2017/05/12 05:23

環境は開発環境は、windows、Visual Studio2015、 SQL Server2014 .NET mvc5、IIS Express、ブラウザはgoogleです。

ControllerからViewにデータを送り、Viewで表示しています。

画面上で、日付・タイトルが表示されるようにしたのですがそれぞれのタイトル名をクリックした時にモーダルが開くようにしたいのですが、どうすればいいでしょうか?

ほとんど見た物のコピペでつくっているんですが、おすすめ一覧には全体とその他のものがあり別々にデータを取得してモデルに入れて持ってきました。
一覧は日付とタイトルが現在出ている状態です。
これで、タイトル名をクリックするとモーダルでタイトル名・日付・内容が出るようにしたいです。
今現在は、タイトルをクリックしても表示されませんが、ページはトップに動いています。なぜ出ないのでしょうか・・・・。
すみませんが、お願いします。

` <!--main--> <div class="contents"> <div class="header"> <header> <h1>おすすめ一覧!</h1> </header> </div> <div class="info_table"> <h2>全体</h2> <hr> <table> <tr class="info_header"> <th width="15%">日付</th> <th width="85%">タイトル</th> </tr> @foreach (var a in Model.ZentaiList) { <tr> <th class="left" width="15%">@m.TourokuNichizi</th> <th class="left" width="85%"><a href="#" class="modal-open" data-target="con1">@m.Title</a></th> </tr> } </table> @foreach (var a in Model.KoumokuList) { <br> <h2>@a.Komokuname</h2> <hr> <table> <tr class="info_header"> <th width="15%">日付</th> <th width="85%">タイトル</th> @foreach (var m in Model.KobetsuList) { <tr> <th class="left" width="15%">@m.TourokuNichizi</th> <th class="left" width="85%"><a href="#" class="modal-open" data-target="con1">@m.Title</a></th> </tr> } </table> } </div> @Html.Partial("ContentFooter") </div><!--END main_contents--> <div id="con1" class="modal-content h65p"> <h1>おすすめ</h1> <div class="notice_data"> <p class="notice_title">タイトル</p> <p class="notice_date">登録日時</p> <p class="notice_text">内容</p> </div> <p><a class="modal-close">閉じる</a></p> </div> <script type="text/javascript"> $(function () { var topBtn = $('#page-top'); topBtn.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップ topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); //最初にページを開いた時の処理 $(document).ready(function () { //右側の表示メニューの初期化 $("#panel-1-ctrl").prop('checked', true); }); //ボタンでメニューの切り替え時の処理 $(function () { // ボタンのクリック時 $('input:radio[name=tab-radios]').click(function () { // ボタンを取得 var tabs_btn = document.getElementsByName("tab-radios"); // 選択されているボタンの取得 for (var i = 1; i <= tabs_btn.length; i++) { if ($("input:radio#panel-" + i + "-ctrl").is(':checked')) { $("#a-for-panel-" + i + "").addClass("a-for-panel-" + i + "_cheked"); } else { $("#a-for-panel-" + i + "").removeClass("a-for-panel-" + i + "_cheked"); } } }); }); //modal $(function () { // 「.modal-open」をクリック $('.modal-open').click(function () { // オーバーレイ用の要素を追加 $('body').append('<div class="modal-overlay"></div>'); // オーバーレイをフェードイン $('.modal-overlay').fadeIn('slow'); // モーダルコンテンツのIDを取得 var modal = '#con1'; // モーダルコンテンツの表示位置を設定 modalResize(); // モーダルコンテンツフェードイン $(modal).fadeIn('slow'); // 背景のスクロールを固定 var scrollTop; scrollTop = $(window).scrollTop(); $('body').addClass('noscroll').css('top', (-scrollTop) + 'px'); // 「.modal-overlay」あるいは「.modal-close」をクリック $('.modal-close').off().click(function () { // モーダルコンテンツとオーバーレイをフェードアウト $(modal).fadeOut('slow'); $('.modal-overlay').fadeOut('slow', function () { // オーバーレイを削除 $('.modal-overlay').remove(); }); // 背景スクロールの固定を解除 $('body').removeClass('noscroll'); $(window).scrollTop(scrollTop); }); // リサイズしたら表示位置を再取得 $(window).on('resize', function () { modalResize(); }); // モーダルコンテンツの表示位置を設定する関数 function modalResize() { // ウィンドウの横幅、高さを取得 var w = $(window).width(); var h = $(window).height(); // モーダルコンテンツの表示位置を取得 var x = (w - $(modal).outerWidth(true)) / 2; var y = (h - $(modal).outerHeight(true)) / 2; // モーダルコンテンツの表示位置を設定 $(modal).css({ 'left': x + 'px', 'top': y + 'px' }); } }); }); </script>

あと、もう一つは@foreach (var a in Model.ZentaiList)で中身を回しているんですが、それが何件か表示したいのですが、
その場合はvar count = Model.ZentaiList((s, i) => new { i, s }))←このような感じでいいのでしょうか。

毎回、質問でやりたいことをうまく伝えられていないので今回もそうでしたらすみません。よろしくお願いします。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2017/05/12 06:05

是非一度 https://teratail.com/help/question-tips を読んでいただくようお願いします。質問を拝見すると、ほとんどコピペで作って内容を理解していなくて、何がわからないかもわからない状態とお見受けしますが、それでは答える側も困ってしまいます。
退会済みユーザー

退会済みユーザー

2017/05/12 06:26

毎度、すみません。
退会済みユーザー

退会済みユーザー

2017/05/12 07:21

https://teratail.com/help/question-tips にも書いてありますが、一度にすべてを解決しようとするのはやめましょう。今回のスレッドでは「モーダルを開く方法」の解決に絞って、cshtml で考えるのではなくそれが ASP.NET によって html にレンダリングされた結果どうなるかを考え、何をどうするとどのスクリプトが動いてどのような仕組みでモーダルウィンドウが表示されるをか理解してから話を進めることをお勧めします。そうしてもらえないと、前の質問者さんのスレッド https://teratail.com/questions/75628 のように、質問者さんにとっても回答者にとっても時間の無駄に終わってしまう可能性が大ですので。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問