ブログBLOG

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

更新日：2013/04/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 = '&lt;div id="iframe-bg" style="' + bgStyle + '"&gt;&lt;/div&gt;' +
             '&lt;div id="iframe-wrap" style="' + wrapStyle + '"&gt;&lt;/div&gt;' +
             '&lt;div id="iframe-btn" style="' + btnStyle + '"&gt;X&lt;/div&gt;';

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


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

    $('#iframe-wrap').html('&lt;iframe src="' + url + '" width="100%" height="100%"&gt;');
    $('#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);

(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('&lt;iframe src="' + url + '" width="100%" height="100%"&gt;');
    $('#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);