34653


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

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

途中まで書いて、どうすればいいのかわからないので教えて下さい。  
あまり、ソースがわからないので具体的に教えて貰えるとうれしいです。

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

↓cshtmlのソース

[code]

    `     <!--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">
    
        //最初にページを開いた時の処理
        $(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>
    
[/code]

`


CC BY-SA 3.0
2017-05-12T02:18:30.253
34651
2017-05-12T04:27:53.000
23086
question
javascript asp.net mvc
それぞれのタイトル名を押下後、モーダルを開く方法


Bootstrapの公式サイトに[質問と類似したケースのサンプル](https://getbootstrap.com/javascript/#modals-
related-target)があります。大まかにいうとまず`modal`は普通に記述します。

[code]

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">おすすめ</h4>
                </div>
                <div class="modal-body">
                    <div class="notice_data">
                        <p class="notice_title">タイトル</p>
                        <p class="notice_date">登録日時</p>
                        <p class="notice_text">内容</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
                </div>
            </div>
        </div>
    </div>
    
[/code]

それからモーダルの表示ボタンには`data-*`属性で必要な情報を埋め込みます。

[code]

    <a href="#" class="modal-open" data-target="myModal"
       data-naiyou="@m.内容">@m.Title</a>
    
[/code]

そしてモーダルの表示時に呼び出される`show.bs.modal`イベントでボタンの属性を参照してモーダルの内容を書き換えます。

[code]

    $('#myModal').on('show.bs.modal', function (e){
        var a = $(e.relatedTarget);
        $('#myModal .notice_title').text(a.text());
        $('#myModal .notice_date').text(a.closest('tr').find('th:first-child').text());
        $('#myModal .notice_text').text(a.data('naiyou'));
    }):
    
[/code]


CC BY-SA 3.0
2017-05-12T04:27:53.000
34653
2017-05-12T04:27:53.000
5750
34651
answer