1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
<style>
.n_fix_menu{position: fixed;left: 0px;right: 0px;bottom: 0px;width: 100%;/* background: #c53836; background: #e98046;*/ background:#a32b2a; z-index: 99;}
.n_fix_menu *{font-family: 'GmarketSansTTF', san-serif !important;}
.n_fix_box{ margin: 0 auto;display: flex; flex-wrap:nowrap; justify-content: space-between;height:45px; padding:5px; box-sizing:border-box;}
.n_fix_info {position:relative; display:flex; flex-wrap:nowrap; align-items: center;}
[name="tel_write_form"]{display: flex;justify-content: space-between;align-items: center; margin:0 auto}
.n_fix_select{position: relative;margin-right: 5px;}
.n_fix_select *{font-family: 'Pretendard', san-serif !important;}
.n_fix_select ul{display: none;position: absolute;left: 0px;bottom: calc(100% + 10px);width: 200px; background: #fff; overflow: hidden;border-radius: 8px;/* border: 1px solid #ed918f; */border: 1px solid #a32b2a;}
.n_fix_select ul button{border: 0px;padding: 0px;width: 100%;height: 40px;line-height: 40px;font-size: 11px;padding: 0px 10px;text-align: left;background: #fff;cursor: pointer;}
.n_fix_select ul button:hover{font-weight: 600;}
.n_fix_s_btn {position: relative;width: 102px;height: 31px;border-radius: 8px;background: rgba(255,255,255,0.2);line-height: 31px;padding: 0px;border: 0px;padding: 0 5px;text-align: left;cursor: pointer;}
.n_fix_s_btn span{color: #fff;font-size: 11px; overflow: hidden;
text-overflow: ellipsis;
width: 90px;
display: inline-block;}
.n_fix_s_btn img {position: absolute; width:5px; top: 50%;transform: translateY(-50%);right:7px;transition: 0.3s;}
.n_fix_s_btn.on img {transform: translateY(-50%) rotate(180deg);}
.n_fix_s_btn.on::after{display: none !important;}
[name="n_fix_tel"]{width: 120px;height: 31px;border-radius: 8px;background: rgba(255,255,255,0.2);line-height: 31px; padding: 0 5px;color: #fff;outline: 0; border:0; margin-right:5px; font-size: 11px;font-family: 'Pretendard', san-serif !important;}
[name="n_fix_tel"]::placeholder{color: #fff;}
#n_fix_chg{display: none;}
#n_fix_chg + label{position: relative;font-size: 11px;color: #fff;font-weight: 600;padding-left: 17px;margin-right: 5px;cursor: pointer; line-height:1.2; font-family: 'Pretendard', san-serif !important;}
#n_fix_chg + label::after{content: '';position: absolute;width: 10px;height: 10px;left: 0px;top: 50%;transform: translateY(-50%);border: 1px solid #fff;text-align: center;}
#n_fix_chg:checked + label::after{content: 'V';position: absolute;width: 10px;height: 10px;left: 0px;top: 50%;transform: translateY(-50%);border: 1px solid #fff;text-align: center;}
.n_fix_btn{display: inline-block;width: 63px; height: 31px;line-height: 31px;font-size: 11px;font-weight: 600;color: #a32b2a;background: #fff;padding: 0px;border: 0px;border-radius: 8px;text-align: center;cursor: pointer; animation:change2 linear alternate infinite 1s}
@keyframes change2{
0%{background: #fff; color:#a32b2a;}
100%{background:rgba(255,255,255,.5); color: #fff;}
}
@keyframes change3{
0%{opacity: 1;}
100%{opacity: .5;}
}
</style>
<div class="n_fix_menu">
<div class="n_fix_box">
<form name="tel_write_form" method="post">
<input type="hidden" name="n_fix_select" value="">
<div class="n_fix_select">
<button type="button" class="n_fix_s_btn"><span>도입 상담분야 선택</span><img src="https://mjsoft.co/html/millennium/images/n_intro/240709/pc_img_quick.png" alt="pc_img_quick"></button>
<ul>
<li><button type="button" data-id="천년경영ERP 도입">천년경영ERP 도입</button></li>
<li><button type="button" data-id="스마트폰(+PDA)영업관리">스마트폰(+PDA)영업관리</button></li>
<li><button type="button" data-id="스마트폰(+온라인) 수발주관리">스마트폰(+온라인) 수발주관리</button></li>
<li><button type="button" data-id="도매몰/개인몰/오픈마켓관리">도매몰/개인몰/오픈마켓관리</button></li>
<li><button type="button" data-id="스마트스토어(네이버) 판매관리">스마트스토어(네이버) 판매관리</button></li>
<li><button type="button" data-id="대여관리/POS/자산관리">대여관리/POS/자산관리</button></li>
<li><button type="button" data-id="물류(배송)시스템/SW개발상담">물류(배송)시스템/SW개발상담</button></li>
</ul>
</div>
<div class="n_fix_info">
<input type="text" name="n_fix_tel" value="" placeholder="연락처를 입력해주세요" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');" maxlength="11" autocomplete="off">
<input type="checkbox" id="n_fix_chg" name="n_fix_chg">
<label for="n_fix_chg">개인정보<br>수집동의</label>
<div class="n_fix_btn">상담신청</div>
</div>
</form>
</div>
</div>
<script>
$(function(){
$('.n_fix_s_btn').click(function(){
$(this).toggleClass('on');
$(this).next('ul').slideToggle();
});
$('.n_fix_select ul button').click(function(){
var id = $(this).attr('data-id');
$('.n_fix_s_btn span').text(id);
$("input[name='n_fix_select']").val(id);
$(this).toggleClass('on');
$('.n_fix_select ul').slideToggle();
});
$('.n_fix_btn').click(function(){ //상담신청 버튼 클릭
var fix_form = $('[name="tel_write_form"]')
if( fix_form.find('.n_fix_s_btn span').text() == '도입 상담분야 선택'){
alert('도입 상담분야를 선택해주세요!');
return;
}
if(fix_form.find('[name="n_fix_tel"]').val().trim() == ''){
alert('연락처를 입력해주세요');
fix_form.find('[name="n_fix_tel"]').focus();
return;
}
if(!fix_form.find('[name="n_fix_chg"]').is(':checked')){
alert('개인정보수집여부에 동의해주세요');
return;
}
var form_data = fix_form.serialize();
$.post("n_fix_callmenu_process.php",form_data,function(rtn){
alert(rtn);
$("input[name='n_fix_select']").val("");
$(".n_fix_s_btn span").text("도입 상담분야 선택");
$("input[name='n_fix_tel']").val("");
$("input[name='n_fix_chg']").prop("checked",false);
});
});
$("input[name='n_fix_tel']").blur(function(){
var val = $("input[name='n_fix_tel']").val();
$("input[name='n_fix_tel']").val(val.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`));
});
});
</script>
|