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

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

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

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

↓cshtmlのソース

`     <!--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>

`