モーダルウィンドウでリンク先を表示する

投稿日:2013年4月26日

リンクをクリックした際、自ページ内でモーダルウィンドウとしてリンク先を表示する。という処理を考えてみます。

例)クリックして表示

JavaScript


(function($) {

  // style
  var bgStyle = 'display: none;' +
                'width: 100%;' +
                'height: 2000px;' +
                'position: fixed;' +
                'top: 0;' +
                'left: 0;' +
                'z-index: 9999;' +
                'background: #333;';

  var wrapStyle = 'display: none;' +
                  'width: 1000px;' +
                  'height:' + ($(window).height() * 0.9) + 'px;' +
                  'margin: 0 0 0 -500px;' +
                  'position: fixed;' +
                  'top: 40px;' +
                  'left: 50%;' +
                  'z-index: 9999;' +
                  'background: #fff;';

  var btnStyle = 'display: none;' +
                 'width: 40px;' +
                 'height: 40px;' +
                 'position: fixed;' +
                 'top: 20px;' +
                 'right: 20px;' +
                 'z-index: 9999;' +
                 'background: #999;' +
                 'border-radius: 50%;' +
                 'cursor: pointer;' +
                 'line-height: 40px;' +
                 'text-align: center;' +
                 'color: #fff';

  var html = '<div id="iframe-bg" style="' + bgStyle + '"></div>' +
             '<div id="iframe-wrap" style="' + wrapStyle + '"></div>' +
             '<div id="iframe-btn" style="' + btnStyle + '">X</div>';

  // add element
  $(html).appendTo('body');


  // click event
  $('.link a').click(function () {
    var url = $(this).attr('href');

    $('#iframe-wrap').html('<iframe src="' + url + '" width="100%" height="100%">');
    $('#iframe-bg').fadeTo('normal', 0.8);

    $('#iframe-wrap iframe').load(function () {
      $('#iframe-wrap').fadeIn();
      $('#iframe-btn').fadeIn();
    });

    return false;
  });

  $('#iframe-btn').click(function () {
    $('#iframe-bg, #iframe-btn, #iframe-wrap').fadeOut();
  });

})(jQuery);
  

リンク先が同一ドメインであれば jQueryでアクセスできます。例では呼び出し先のヘッダーとフッターを隠しています。

例)クリックして表示

BRISKトップページ

JavaScript


(function($) {

  $('.link2 a').click(function () {
    var url = $(this).attr('href');

    $('#iframe-wrap').html('<iframe src="' + url + '" width="100%" height="100%">');
    $('#iframe-bg').fadeTo('normal', 0.8);

    $('#iframe-wrap iframe').load(function () {
      // 呼び出し先のヘッダーとフッターを隠す
      $(this).contents().find('#header, #footer').hide();

      $('#iframe-wrap').fadeIn();
      $('#iframe-btn').fadeIn();
    });

    return false;
  });

})(jQuery);
  

(藤崎)

関連記事

カテゴリー: JavaScript, jQuery, WEB, サイト制作
  • LINEスタンプ販売中!「カフィーノ♪」 BRISKオリジナル