fe / YOHOBUYWAP · Commits

Go to a project

Authored by wangqing
Commit afd0254555f1695da2482faee1b90e60ce8e9811 1 parent 73544d74

增加出入弹框

Inline Side-by-side
Showing 2 changed files with 310 additions and 3 deletions
@@ -750,6 +750,73 @@ function actionTipPic() { @@ -750,6 +750,73 @@ function actionTipPic() {
750 }); 750 });
751 } 751 }
752 752
  753 +
  754 +
  755 +function closeCover(){
  756 + var $cover = $('#cover');
  757 +
  758 + $cover.remove();
  759 +}
  760 +/**
  761 + * 首次进入有弹窗
  762 + * @return {[type]} [description]
  763 + */
  764 +function actionCover() {
  765 + var gender = cookieMap._Gender;
  766 +
  767 + setCookie('_Channel','boys',{path : '/',domain : '.yohobuy.com',expires : 7});
  768 + if(typeof gender == 'undefined' || gender == '' || gender == null){
  769 + $.get('http://www.yohobuy.com/index/guide', function(data){
  770 + var newMask = document.createElement("div");
  771 + newMask.id = 'cover';
  772 + newMask.innerHTML=data;
  773 + document.body.appendChild(newMask);
  774 + var window_height = $(window).height();
  775 + var self_height = $('.guide-box').height();
  776 + var container_top = window_height / 2 - self_height / 2;
  777 + var length=$('.guide-box .clear').find("li").length;
  778 + $('.guide-box').css({
  779 + width: (200 * length) + 'px',
  780 + top: container_top + 'px'
  781 + });
  782 + $('#cover').bind('click', function(event){
  783 + setCookie('_Gender','1,3',{path : '/',domain : '.yohobuy.com',expires : 90});
  784 + setCookie('_Channel','boys',{path : '/',domain : '.yohobuy.com',expires : 7});
  785 + closeCover();
  786 + });
  787 + $('#cover .guide-box .close').bind('click', function(event){
  788 + getSource('弹窗','CLOSE','homepage_man');
  789 + setCookie('_Gender','1,3',{path : '/',domain : '.yohobuy.com',expires : 90});
  790 + setCookie('_Channel','boys',{path : '/',domain : '.yohobuy.com',expires : 7});
  791 + analy('guide_close');
  792 + closeCover();
  793 + });
  794 + $('.boys img , .boys .go').bind('click', function(event){
  795 + getSource('弹窗','BOYS','homepage_man');
  796 + setCookie('_Gender','1,3',{path : '/',domain : '.yohobuy.com',expires : 90});
  797 + setCookie('_Channel','boys',{path : '/',domain : '.yohobuy.com',expires : 7});
  798 + analy( 'guide_boys');
  799 + closeCover();
  800 + });
  801 + $('.girls img, .girls .go').bind('click', function(event){
  802 + getSource('弹窗','GIRLS','homepage_woman');
  803 + setCookie('_Gender','2,3',{path : '/',domain : '.yohobuy.com',expires : 90});
  804 + setCookie('_Channel','girls',{path : '/',domain : '.yohobuy.com',expires : 7});
  805 + analy( 'guide_girls');
  806 + });
  807 + $('.lifestyle img, .lifestyle .go').bind('click', function(event){
  808 + setCookie('_Channel','lifestyle',{path : '/',domain : '.yohobuy.com',expires : 7});
  809 + getSource('弹窗','LIEFSTYLE','homepage_lifestyle');
  810 + analy( 'guide_lifestyle');
  811 + });
  812 + //防止冒泡事件
  813 + $('#cover .guide-box').bind('click', function(event){
  814 + event.stopPropagation();
  815 + });
  816 +
  817 + });
  818 + }
  819 +}
753 /** 820 /**
754 * 查询跳转后保留关键字 821 * 查询跳转后保留关键字
755 * @return {[type]} [description] 822 * @return {[type]} [description]
@@ -1200,7 +1267,7 @@ function actionExeTemplate() { @@ -1200,7 +1267,7 @@ function actionExeTemplate() {
1200 * @return {[type]} [description] 1267 * @return {[type]} [description]
1201 */ 1268 */
1202 function actionSearch() { 1269 function actionSearch() {
1203 - var searchDomain = 'http://search.yohobuy.com/product/search/suggest'; 1270 + var searchDomain = 'http://search.yohobuy.com/api/suggest';
1204 1271
1205 $('#query_key').search(searchDomain); 1272 $('#query_key').search(searchDomain);
1206 } 1273 }
@@ -1374,6 +1441,7 @@ function init() { @@ -1374,6 +1441,7 @@ function init() {
1374 actionListenDelCarGoods(); //监听购物车删除 1441 actionListenDelCarGoods(); //监听购物车删除
1375 actionListenCartMore(); // 1442 actionListenCartMore(); //
1376 actionLoginInfo(); //获取登录信息 1443 actionLoginInfo(); //获取登录信息
  1444 + actionCover(); //初次登录弹框
1377 } 1445 }
1378 1446
1379 -init();  
  1447 +init();
@@ -670,6 +670,11 @@ @@ -670,6 +670,11 @@
670 top: 22px; 670 top: 22px;
671 left: 44.2%; 671 left: 44.2%;
672 position: absolute; 672 position: absolute;
  673 + .main-link {
  674 + display: block;
  675 + width: 100%;
  676 + height: 100%;
  677 + }
673 } 678 }
674 679
675 .search { 680 .search {
@@ -1164,6 +1169,11 @@ @@ -1164,6 +1169,11 @@
1164 } 1169 }
1165 .icon-logo { 1170 .icon-logo {
1166 left: 39.2%; 1171 left: 39.2%;
  1172 + .main-link {
  1173 + display: block;
  1174 + width: 100%;
  1175 + height: 100%;
  1176 + }
1167 } 1177 }
1168 .sub-nav-list { 1178 .sub-nav-list {
1169 width: 990px; 1179 width: 990px;
@@ -1215,4 +1225,233 @@ @@ -1215,4 +1225,233 @@
1215 } 1225 }
1216 } 1226 }
1217 } 1227 }
1218 - 1228 +#cover {
  1229 + left: 0px;
  1230 + top: 0px;
  1231 + width: 100%;
  1232 + height: 100%;
  1233 + position: fixed;
  1234 + z-index: 1001;
  1235 +}
  1236 +#cover .con {
  1237 + background: rgba(0, 0, 0, 0.6) !important;
  1238 + left: 0px;
  1239 + top: 0px;
  1240 + width: 100%;
  1241 + height: 100%;
  1242 + position: absolute;
  1243 + z-index: 1002;
  1244 + opacity: 0.5;
  1245 + -moz-opacity: 0.5;
  1246 +}
  1247 +#cover .tag_img_warpper {
  1248 + margin: 0px auto;
  1249 + width: 180px;
  1250 + height: 168px;
  1251 +}
  1252 +#cover .tag_img_warpper img {
  1253 + width: 100%;
  1254 + height: 100%;
  1255 +}
  1256 +#cover .guide-box {
  1257 + background: rgb(255, 255, 255);
  1258 + margin: 0px auto;
  1259 + height: 400px;
  1260 + position: relative;
  1261 + z-index: 1003;
  1262 +}
  1263 +#cover .guide-box .close {
  1264 + top: -15px;
  1265 + text-align: center;
  1266 + right: -15px;
  1267 + color: rgb(255, 255, 255);
  1268 + line-height: 22px;
  1269 + font-size: 24px;
  1270 + position: absolute;
  1271 +}
  1272 +#cover .guide-box .close {
  1273 + background: rgb(0, 0, 0);
  1274 + border-radius: 50px;
  1275 + border: currentColor;
  1276 + border-image: none;
  1277 + width: 28px;
  1278 + height: 28px;
  1279 + line-height: 25px;
  1280 + display: block;
  1281 + -moz-border-radius: 50px;
  1282 + -webkit-border-radius: 50px;
  1283 +}
  1284 +#cover .guide-box ul li {
  1285 + padding: 10px;
  1286 + width: 200px;
  1287 + height: 400px;
  1288 + float: left;
  1289 + box-sizing: border-box;
  1290 +}
  1291 +#cover .guide-box ul li.girls {
  1292 + border-left-color: rgb(238, 238, 238);
  1293 + border-left-width: 1px;
  1294 + border-left-style: solid;
  1295 +}
  1296 +#cover .guide-box ul li.lifestyle {
  1297 + border-left-color: rgb(238, 238, 238);
  1298 + border-left-width: 1px;
  1299 + border-left-style: solid;
  1300 +}
  1301 +#cover .guide-box ul li.kids {
  1302 + border-left-color: rgb(238, 238, 238);
  1303 + border-left-width: 1px;
  1304 + border-left-style: solid;
  1305 +}
  1306 +#cover .guide-box ul li.boys .goods-num {
  1307 + text-align: center;
  1308 + color: rgb(187, 187, 187);
  1309 + line-height: 12px;
  1310 + font-size: 12px;
  1311 + margin-top: 16px;
  1312 +}
  1313 +#cover .guide-box ul li.girls .goods-num {
  1314 + text-align: center;
  1315 + color: rgb(187, 187, 187);
  1316 + line-height: 12px;
  1317 + font-size: 12px;
  1318 + margin-top: 16px;
  1319 +}
  1320 +#cover .guide-box ul li.kids .goods-num {
  1321 + text-align: center;
  1322 + color: rgb(187, 187, 187);
  1323 + line-height: 12px;
  1324 + font-size: 12px;
  1325 + margin-top: 16px;
  1326 +}
  1327 +#cover .guide-box ul li.lifestyle .goods-num {
  1328 + text-align: center;
  1329 + color: rgb(187, 187, 187);
  1330 + line-height: 12px;
  1331 + font-size: 12px;
  1332 + margin-top: 16px;
  1333 +}
  1334 +#cover .guide-box ul li a.go {
  1335 + margin: 26px auto 0px;
  1336 + width: 100%;
  1337 + height: 18px;
  1338 + text-align: center;
  1339 + color: rgb(176, 176, 176);
  1340 + line-height: 18px;
  1341 + font-size: 18px;
  1342 + font-style: italic;
  1343 + font-weight: lighter;
  1344 + display: block;
  1345 +}
  1346 +#cover .boys .block_cn {
  1347 + text-align: center;
  1348 + line-height: 26px;
  1349 + font-size: 26px;
  1350 + font-weight: bold;
  1351 + margin-top: 30px;
  1352 +}
  1353 +#cover .girls .block_cn {
  1354 + text-align: center;
  1355 + line-height: 26px;
  1356 + font-size: 26px;
  1357 + font-weight: bold;
  1358 + margin-top: 30px;
  1359 +}
  1360 +#cover .kids .block_cn {
  1361 + text-align: center;
  1362 + line-height: 26px;
  1363 + font-size: 26px;
  1364 + font-weight: bold;
  1365 + margin-top: 30px;
  1366 +}
  1367 +#cover .lifestyle .block_cn {
  1368 + text-align: center;
  1369 + line-height: 26px;
  1370 + font-size: 26px;
  1371 + font-weight: bold;
  1372 + margin-top: 30px;
  1373 +}
  1374 +#cover .boys .block_cn {
  1375 + color: black;
  1376 +}
  1377 +#cover .boys .block_en {
  1378 + color: black;
  1379 +}
  1380 +#cover .girls .block_cn {
  1381 + color: rgb(255, 136, 174);
  1382 +}
  1383 +#cover .girls .block_en {
  1384 + color: rgb(255, 136, 174);
  1385 +}
  1386 +#cover .kids .block_cn {
  1387 + color: rgb(122, 217, 248);
  1388 +}
  1389 +#cover .kids .block_en {
  1390 + color: rgb(122, 217, 248);
  1391 +}
  1392 +#cover .lifestyle .block_cn {
  1393 + color: rgb(79, 64, 55) !important;
  1394 +}
  1395 +#cover .lifestyle .block_en {
  1396 + color: rgb(79, 64, 55) !important;
  1397 +}
  1398 +#cover .boys .block_en {
  1399 + text-align: center;
  1400 + line-height: 26px;
  1401 + font-size: 26px;
  1402 + font-weight: bold;
  1403 + margin-top: 19px;
  1404 +}
  1405 +#cover .girls .block_en {
  1406 + text-align: center;
  1407 + line-height: 26px;
  1408 + font-size: 26px;
  1409 + font-weight: bold;
  1410 + margin-top: 19px;
  1411 +}
  1412 +#cover .kids .block_en {
  1413 + text-align: center;
  1414 + line-height: 26px;
  1415 + font-size: 26px;
  1416 + font-weight: bold;
  1417 + margin-top: 19px;
  1418 +}
  1419 +#cover .lifestyle .block_en {
  1420 + text-align: center;
  1421 + line-height: 26px;
  1422 + font-size: 26px;
  1423 + font-weight: bold;
  1424 + margin-top: 19px;
  1425 +}
  1426 +#cover .boys .block_line {
  1427 + margin: 20px auto 0px;
  1428 + width: 50px;
  1429 + height: 0px;
  1430 + border-bottom-color: rgb(204, 204, 204);
  1431 + border-bottom-width: 1px;
  1432 + border-bottom-style: solid;
  1433 +}
  1434 +#cover .girls .block_line {
  1435 + margin: 20px auto 0px;
  1436 + width: 50px;
  1437 + height: 0px;
  1438 + border-bottom-color: rgb(204, 204, 204);
  1439 + border-bottom-width: 1px;
  1440 + border-bottom-style: solid;
  1441 +}
  1442 +#cover .kids .block_line {
  1443 + margin: 20px auto 0px;
  1444 + width: 50px;
  1445 + height: 0px;
  1446 + border-bottom-color: rgb(204, 204, 204);
  1447 + border-bottom-width: 1px;
  1448 + border-bottom-style: solid;
  1449 +}
  1450 +#cover .lifestyle .block_line {
  1451 + margin: 20px auto 0px;
  1452 + width: 50px;
  1453 + height: 0px;
  1454 + border-bottom-color: rgb(204, 204, 204);
  1455 + border-bottom-width: 1px;
  1456 + border-bottom-style: solid;
  1457 +}