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

This commit is contained in:
whitedot
2013-05-28 15:07:41 +09:00
parent 3df6a6e890
commit 5e151c8d78
6 changed files with 50 additions and 18 deletions

View File

@ -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}

View File

@ -620,12 +620,26 @@ $(function(){
}
});
$("textarea#wr_content[maxlength]").live("keyup change", function() {
var str = $(this).val()
var mx = parseInt($(this).attr("maxlength"))
if (str.length > mx) {
$("textarea#wr_content[maxlength]").live("keyup change", function() {
var str = $(this).val()
var mx = parseInt($(this).attr("maxlength"))
if (str.length > mx) {
$(this).val(str.substr(0, mx));
return false;
}
return false;
}
});
});
});
// 모달 레이어 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);
}
// 모달 레이어 끝

View File

@ -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)

View File

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

View File

@ -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>';
$it_name .= '<div class="sod_bsk_itopt">'.$it_options.$mod_options.'</div>';
$mod_options = '<div class="sod_option_btn"><button type="button" class="mod_options">선택사항수정</button></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();";

View File

@ -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']);