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

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

ただいまの
回答率

90.51%

  • JavaScript

    20335questions

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

  • HTML

    11446questions

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

  • C#

    9018questions

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

  • ASP.NET

    621questions

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

  • MVC

    257questions

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

cshtmlでモーダルを開く方法

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 1,491
退会済みユーザー

退会済みユーザー

環境は開発環境は、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 }))←このような感じでいいのでしょうか。

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • SurferOnWww

    2017/05/12 15:05

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2017/05/12 15:26

    毎度、すみません。

    キャンセル

  • SurferOnWww

    2017/05/12 16:21

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

    キャンセル

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

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

  • JavaScript

    20335questions

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

  • HTML

    11446questions

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

  • C#

    9018questions

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

  • ASP.NET

    621questions

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

  • MVC

    257questions

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