環境は開発環境は、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 }))←このような感じでいいのでしょうか。
毎回、質問でやりたいことをうまく伝えられていないので今回もそうでしたらすみません。よろしくお願いします。
あなたの回答
tips
プレビュー