modalwindow

モーダルウィンドウ

１．初期設定

xxx.html

<!-- modal window -->
<script>
$(function(){
  $('.btns').click(function(){
    wn = '.' + $(this).data('tgt');
    var mW = $(wn).find('.modalBody').innerWidth() / 2;
    var mH = $(wn).find('.modalBody').innerHeight() / 2;
    $(wn).find('.modalBody').css({'margin-left':-mW,'margin-top':-mH});
    $(wn).fadeIn(500);
  });
  $('.close,.modalBK').click(function(){
    $(wn).fadeOut(500);
  });
});
</script>
<!-- 任意で -->
<style>
/* modal window besic css */
.modal{ display:none; }
.modalBody{
  position: fixed;
  z-index:1000;
  /*background: #000;*/
  border: 1px solid #ccc;
  background: white;
  left:50%;
  top:50%;
  width: 1000px;
  height: 500px;
}
.modalBK{
  position: fixed;
  z-index: 999;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: #000;
  opacity: 0.9;
  filter: alpha(opacity=90);
  -moz-opacity:0.90;
}
/* modal window option css */
/*.btns{font-size: 80px; width:150px; background:#111; height: 150px; line-height:150px; text-align:center; font-family: arial; color: #fff; float: left; margin:10px; cursor: pointer}*/
.close{cursor: pointer;}
.modal{width:690px; color: #eee;}
.modal p{font-size:12px; text-align:justify;}
.modal h1{font-weight:bold; font-size: 30px;}
.modalBody{padding: 10px;}
</style>

２．適用箇所
data-tgt="wd001"の数字を変えれば複製できる。

xxx.html

<td><a data-tgt="wd001" class="btns"><?php echo $value['Orders']['order_no']; ?></a></td>

<div class="modal wd001">
 <div class="modalBody">
  <p class="close">×close</p>
  <p>
   <table>
    <tr><th>注文番号</th><th>商品名</th><th>明細小計</th></tr>
    <tr>
     <td>1234567890</td>
     <td>アイテム01</td>
     <td>1,000</td>
    </tr>
   </table>
  </p>
 </div>
 <div class="modalBK"></div>
</div>