$(function(){ // スクロールバーの横幅を取得 $('html').append('<div class="scrollbar" style="overflow:scroll;"></div>'); var scrollsize = window.innerWidth - $('.scrollbar').prop('clientWidth'); $('.scrollbar').hide(); // 「.modal-open」をクリック $('.modal-open').click(function(){ // html、bodyを固定（overflow:hiddenにする） $('html, body').addClass('lock'); // モーダルコンテンツの表示位置を設定 modalResize(); // オーバーレイ用の要素を追加 $('body').append('<div class="modal-overlay"></div>'); // オーバーレイをフェードイン $('.modal-overlay').fadeIn('slow'); // モーダルコンテンツのIDを取得 var modal = '#' + $(this).attr('data-target'); // モーダルコンテンツを囲む要素を追加 $(modal).wrap("<div class='modal-wrap'></div>"); // モーダルコンテンツを囲む要素を表示 $('.modal-wrap').show(); 　　// モーダルコンテンツの表示位置を設定 modalResize(); // モーダルコンテンツフェードイン $(modal).fadeIn('slow'); // モーダルコンテンツをクリックした時はフェードアウトしない $(modal).click(function(e){ e.stopPropagation(); }); // 「.modal-overlay」あるいは「.modal-close」をクリック $('.modal-wrap, .modal-close').off().click(function(){ // モーダルコンテンツとオーバーレイをフェードアウト $(modal).fadeOut('slow'); $('.modal-overlay').fadeOut('slow',function(){ // html、bodyの固定解除 $('html, body').removeClass('lock'); // オーバーレイを削除 $('.modal-overlay').remove(); // モーダルコンテンツを囲む要素を削除 $(modal).unwrap("<div class='modal-wrap'></div>"); }); }); //リサイズしたら表示位置を再取得 $(window).on('resize', function(){ modalResize(); }); // モーダルコンテンツの表示位置を設定する関数 function modalResize(){ // ウィンドウの横幅、高さを取得 var w = $(window).width(); var h = $(window).height(); // モーダルコンテンツの横幅、高さを取得 var mw = $(modal).outerWidth(true); var mh = $(modal).outerHeight(true); // モーダルコンテンツの表示位置を設定 if (w <= 640) { var x = (w - mw) / 2; $(modal).css({'left': x + 'px','top': 30 + 'px'}); $('.modal-content').width(70 + '%'); } else { if (mh > h) { var x = (w - mw - $('.global_guide').width()) / 2; $(modal).css({'right': x + 'px','top': 0 + 'px'}); } else { var x = (w - mw - $('.global_guide').width()) / 2; var y = (h - mh) / 2; $(modal).css({'right': x + 'px','top': y + 'px'}); }} } }); }); .hoge { text-align: center; } .modal-content { position:absolute; display:none; margin: 30px; width:50%; padding:10px 20px; border:2px solid #aaa; background:#fff; } .modal-content p { margin:0; padding:0; } .modal-overlay { z-index:1; display:none; position:fixed; top:0; left:0; width:100%; height:120%; background-color:rgba(0,0,0,0.75); } .modal-wrap { z-index:2; display:none; position:fixed; top:0; left:0; width:100%; height:100%; overflow:auto; } .modal-open { color:#00f; text-decoration:underline; } .modal-open:hover { cursor:pointer; color:#f00; } .modal-close { color:#00f; text-decoration:underline; } .modal-close:hover { cursor:pointer; color:#f00; } @media screen and (max-width: 640px){ ul.tab1 li, ul.tab2 li { width:100% } } $(function() { //クリックしたときのファンクションをまとめて指定 $('.tab1 li').click(function() { //.index()を使いクリックされたタブが何番目かを調べ、 //indexという変数に代入します。 var index = $('.tab1 li').index(this); //コンテンツを一度すべて非表示にし、 $('.content1 li').css('display','none'); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.content1 li').eq(index).css('display','block'); //一度タブについているクラスselectを消し、 $('.tab1 li').removeClass('select'); //クリックされたタブのみにクラスselectをつけます。 $(this).addClass('select') }); }); $(function() { //クリックしたときのファンクションをまとめて指定 $('.tab2 li').click(function() { //.index()を使いクリックされたタブが何番目かを調べ、 //indexという変数に代入します。 var index = $('.tab2 li').index(this); //コンテンツを一度すべて非表示にし、 $('.content2 li').css('display','none'); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.content2 li').eq(index).css('display','block'); //一度タブについているクラスselectを消し、 $('.tab2 li').removeClass('select'); //クリックされたタブのみにクラスselectをつけます。 $(this).addClass('select') }); }); $(function() { //クリックしたときのファンクションをまとめて指定 $('.tab3 li').click(function() { //.index()を使いクリックされたタブが何番目かを調べ、 //indexという変数に代入します。 var index = $('.tab3 li').index(this); //コンテンツを一度すべて非表示にし、 $('.content3 li').css('display','none'); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.content3 li').eq(index).css('display','block'); //一度タブについているクラスselectを消し、 $('.tab3 li').removeClass('select'); //クリックされたタブのみにクラスselectをつけます。 $(this).addClass('select') }); }); $(function() { //クリックしたときのファンクションをまとめて指定 $('.tab4 li').click(function() { //.index()を使いクリックされたタブが何番目かを調べ、 //indexという変数に代入します。 var index = $('.tab4 li').index(this); //コンテンツを一度すべて非表示にし、 $('.content4 li').css('display','none'); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.content4 li').eq(index).css('display','block'); //一度タブについているクラスselectを消し、 $('.tab4 li').removeClass('select'); //クリックされたタブのみにクラスselectをつけます。 $(this).addClass('select') }); }); .frame-wrapper__video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; margin-bottom: 50px; } .frame-wrapper__video iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

イベントお申込みはこちら

資格スクエアの予備試験講座説明会

「オンライン講義だから対面で話を聞く機会はない」そんな風に思っている方も多いのではないでしょうか？
資格スクエアでは、対面によるサポートの機会をしっかりと設けております。今月も平日夜・週末と、毎週全国各地にて講師・スタッフによる講座説明会を開催しています。

イベントお申込みはこちら

監修

講演概要 ・「予備試験合格」の価値とは
・今からでもまずは、2020年/2021年予備試験に向けて勉強すべき理由とは
・理解しておくべき法律学習の特殊性　など 対象者 ・これから予備試験の学習を始める方
・予備試験を受けようか迷っている方 参加費用 無料 開催場所 【東日本】札幌・仙台・東京・新宿・新橋・池袋・大宮・渋谷・横浜・品川・御茶ノ水・池袋・小田原
【西日本】大阪・京都・神戸・名古屋 ・広島 ・博多　など
▶日時・会場詳細はこちら

イベントお申込みはこちら

説明会の流れ

イベントお申込みはこちら