jQueryでダイアログを作成する例文

ダイアログ

dialogを含むjQueryをダウンロードし、読み込む


<script type="text/javascript" src="js/js-pack-dialog.js"></script>

<script type="text/javascript">
<!--

$(document).ready(function() {

 //select all the a tag with name equal to modal
 $('a[name=modal]').click(function(e) {

  //Cancel the link behavior
  e.preventDefault();

  //aタグを取得
  var id = $(this).attr('href');

  //スクリーンの幅と高さを取得
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();

  //Set heigth and width to mask to fill up the whole screen
  $('#mask').css({'width':maskWidth,'height':maskHeight});

  //背景のフェードイン速度、不透明度
  $('#mask').fadeIn(200);
  $('#mask').fadeTo("200",0.7);

  //スクリーンの幅と高さをセット
  var winH = $(window).height();
  var winW = $(window).width();

  //ウィンドウの位置：真ん中へ
  $(id).css('top',  winH/2-$(id).height()/2);
  $(id).css('left', winW/2-$(id).width()/2);

  //ダイアログのフェードイン速度
  $(id).fadeIn(400);

 });


 //閉じる処理
 $('.window .close').click(function (e) {
  //Cancel the link behavior
  e.preventDefault();

  $('#mask').hide();
  $('.window').hide();
 });


 //背景がクリックされたときの処理
 $('#mask').click(function () {
  $(this).hide();
  $('.window').hide();
 });

});

// -->
</script>


<style type="text/css">
<!--

/* 背景 */

#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}

/* ダイアログ本体 */

#boxes #dialog {
position:absolute;
display:none;
left:0px;
top:0px;
width:570px;
height:600px;
z-index:9999;
background-color:#FFF;
}
#boxes a.close-text {
position:absolute;
display:block;
left:475px;
top:5px;
font-size:20px;
font-weight:bolder;
color:#0D156F;
}
#boxes a.close-text:hover {
color:#E00;
}

-->
</style>


<a href="#dialog" id="aaaa" name="modal">ここをクリックするとダイアログが開く</a>


<!-- ダイアログ背景 -->
<div id="boxes">

<!-- ダイアログ本体 -->
<div id="dialog" class="window">

<!-- 閉じる -->
<a href="#" class="close close-text">閉じる</a>
あいうえお
</div>  

<div id="mask"></div>
</div>

ページを開いたら自動的にダイアログ

<script type="text/javascript"><!--

//ダイアログ：オープン処理

$(document).ready(function() {

  //Cancel the link behavior
  //e.preventDefault();

  //スクリーンの幅と高さを取得
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();

  //Set heigth and width to mask to fill up the whole screen
  $('#mask').css({'width':maskWidth,'height':maskHeight});

  //背景のフェードイン速度、不透明度
  $('#mask').fadeIn(200);
  $('#mask').fadeTo("200",0.7);

  //スクリーンの幅と高さをセット
  var winH = $(window).height();
  var winW = $(window).width();

  //ウィンドウの位置：真ん中へ
  $('#dialog').css('top',  winH/2-$('#dialog').height()/2);
  $('#dialog').css('left', winW/2-$('#dialog').width()/2);

  //ダイアログのフェードイン速度
  $('#dialog').fadeIn(400);


 //閉じる処理
 $('.window .close').click(function (e) {
  //Cancel the link behavior
  e.preventDefault();

  $('#mask').hide();
  $('.window').hide();
 });


});

// --></script>