쇼핑몰: #196 장바구니 옵션 수정 기능 마크업 및 스타일 완료

css/default_shop.css

@@ -155,7 +155,7 @@ a:active {color:#000;text-decoration:underline}
 #sbn_aside ul {margin:0;padding:0;border:0;list-style:none}
 #sbn_aside li {margin:0 0 1px}
 
-#container {z-index:4;position:relative;float:left;width:740px;min-height:500px;height:auto !important;height:500px;background:#fff;zoom:1}
+#container {position:relative;float:left;width:740px;min-height:500px;height:auto !important;height:500px;background:#fff;zoom:1}
 #container:after {display:block;visibility:hidden;clear:both;content:""}
 
 /* 텍스트 크기 조절 */
@@ -185,6 +185,9 @@ a.sanchor_on {background:#626870;color:#fff !important;text-decoration:none}
 #ft b {display:inline-block;margin:0 5px 0 0}
 #ft_totop {position:absolute;top:20px;right:0}
 
+/* Modal Layer */
+#win_mask {display:none;z-index:9999;position:absolute;top:0;left:0;background:#000}
+
 /* Mobile화면으로 */
 #mobile_cng {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center}
 
@@ -635,7 +638,13 @@ input.required:focus {border:1px solid #b8c9c2;background:#21272e !important;col
 /* 장바구니 */
 #sod_bsk {}
 .sod_bsk_img {width:90px;text-align:center}
-.sod_bsk_itopt {padding:3px;border:1px solid #e9e9e9;background:#f5f6fa}
+.sod_bsk_itopt {margin:5px 0;border:1px solid #e9e9e9;border-bottom:0;background:#f5f6fa}
+.sod_bsk_itopt ul {margin:0;padding:0;list-style:none}
+.sod_bsk_itopt li {padding:3px;border-bottom:1px solid #e9e9e9}
+.sod_option_btn .mod_options {margin:0;padding:3px 0;width:100%;border:0;background:#333;color:#fff}
+
+#sod_bsk_list {position:relative}
+#sod_bsk_list #mod_option_frm {z-index:10000;position:absolute;top:0;left:99px;padding:20px;width:500px;height:auto !important;height:500px;max-height:500px;border:1px solid #000;background:#f5f6fa;overflow-y:scroll}
 
 #sod_bsk_dvr {padding:5px 0 12px;border-bottom:1px solid #e9e9e9}
 #sod_bsk_cnt {margin:0 0 10px;padding:12px 0 12px;border-bottom:1px solid #e9e9e9;background:#f5f6fa}

js/common.js

@@ -629,3 +629,17 @@ $(function(){
         }
     });
 });
+
+// 모달 레이어 http://mytory.net/archives/783 참조
+function winMask(){ // 모달 레이어 배경
+    //화면의 높이와 너비를 구한다.
+    var maskHeight = $(document).height();
+    var maskWidth = $(window).width();
+
+    //마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
+    $('#win_mask').css({'width':maskWidth,'height':maskHeight});
+
+    //애니메이션 효과
+    $('#win_mask').fadeTo("fast",0.8);
+}
+// 모달 레이어 끝

lib/shop.lib.php

@@ -693,7 +693,7 @@ function print_item_options($it_id, $uq_id)
     for($i=0; $row=sql_fetch_array($result); $i++) {
         if($i == 0)
             $str .= '<ul>'.PHP_EOL;
-        $str .= '<li>'.$row['ct_option'].'&nbsp;&nbsp;'.$row['ct_qty'].'개</li>'.PHP_EOL;
+        $str .= '<li>'.$row['ct_option'].' '.$row['ct_qty'].'개</li>'.PHP_EOL;
     }
 
     if($i > 0)

shop/cartoption.php

@@ -122,9 +122,9 @@ if($option_2) {
 </div>
 
 <div id="sit_tot_price"></div>
-<div>
+<div class="btn_confirm">
-    <input type="submit" value="선택사항적용">
+    <input type="submit" value="선택사항적용" class="btn_submit">
-    <button type="button" id="mod_option_close">닫기</button>
+    <button type="button" id="mod_option_close" class="btn_cancel">닫기</button>
 </div>
 </form>
 

shop/cartsub.inc.php

@@ -16,7 +16,7 @@ else
 
 <script src="<?php echo G4_JS_URL; ?>/shop.js"></script>
 
-<form name="frmcartlist" method="post">
+<form name="frmcartlist" id="sod_bsk_list" method="post">
 <table class="basic_tbl">
 <thead>
 <tr>
@@ -110,8 +110,8 @@ for ($i=0; $row=mysql_fetch_array($result); $i++)
     if($it_options) {
         $mod_options = '';
         if($s_page == 'cart.php')
-            $mod_options = '<button type="button" class="mod_options">선택사항수정</button>';
+            $mod_options = '<div class="sod_option_btn"><button type="button" class="mod_options">선택사항수정</button></div>';
-        $it_name .= '<div class="sod_bsk_itopt">'.$it_options.$mod_options.'</div>';
+        $it_name .= '<div class="sod_bsk_itopt">'.$it_options.'</div>';
     }
 
     $point       = $sum['point'];
@@ -123,7 +123,7 @@ for ($i=0; $row=mysql_fetch_array($result); $i++)
     <td>
         <input type="hidden" name="it_id[<?php echo $i; ?>]"    value="<?php echo $row['it_id']; ?>">
         <input type="hidden" name="it_name[<?php echo $i; ?>]"  value="<?php echo get_text($row['it_name']); ?>">
-        <?php echo $it_name; ?>
+        <?php echo $it_name.$mod_options; ?>
     </td>
     <td class="td_num"><?php echo number_format($sum['qty']); ?></td>
     <td class="td_bignum"><?php echo number_format($row['ct_price']); ?></td>
@@ -242,6 +242,8 @@ $(function() {
         var it_id = $(this).closest("tr").find("input[name^=it_id]").val();
         var idx = $(".mod_options").index($(this));
 
+        winMask(); // 모달 윈도우 배경 출력
+
         $.post(
             "./cartoption.php",
             { it_id: it_id, idx: idx },
@@ -265,7 +267,12 @@ $(function() {
     // 옵션수정 닫기
     $("#mod_option_close").live("click", function() {
         $("#mod_option_frm").remove();
+        $('#win_mask, .window').hide();
     });
+    $('#win_mask').click(function () {
+        $('#win_mask, #mod_option_frm').hide();
+    });
+
 });
 
 function form_check(act) {
@@ -277,7 +284,7 @@ function form_check(act) {
         f.act.value = act;
 
         <?php
-        if (get_session('ss_mb_id')) // 회원인 겨우
+        if (get_session('ss_mb_id')) // 회원인 경우
         {
             echo "f.action = './orderform.php';";
             echo "f.submit();";

shop/shop.tail.php

@@ -35,6 +35,8 @@ $admin = get_admin("super");
     </div>
 </footer>
 
+<div id="win_mask"><!-- 모달 레이어 배경 http://mytory.net/archives/783 참조 --></div>
+
 <?php
 if(!G4_IS_MOBILE) {
     $querystring = str_replace("&", "&amp;", $_SERVER['QUERY_STRING']);