加入购物车时，弹出浮动层，加入遮罩效果，去除原网站的弹出对话框

2016-07-07 14:55 来源：www.chinab4c.com 作者：ecshop专家



我非专业人员，也不懂得编程。只是将网上别人的功劳给更改了一下。
还望大家多多指正，谢谢。

现在官方给的效果是：点击购买，弹出窗口，会有三行提示，继续购买就点是，结账就点否等。
效果为弹出窗口，如淘宝一样。



仅修改js/common.js
找到
  1. case '1' :
  2. if (confirm(result.message)) location.href = cart_url;
  3. break;
  4. case '2' :
  5. if (!confirm(result.message)) location.href = cart_url;
  6. break;
  7. case '3' :
  8. location.href = cart_url;
  9. break;
复制代码

替换为：
  1. case '1' :
  2. //if (confirm(result.message)) location.href = cart_url;
  3. openDiv_chen(result.content)//将购物车信息作为参数传入
  4. break;
  5. case '2' :
  6. //if (!confirm(result.message)) location.href = cart_url;
  7. openDiv_chen(result.content)
  8. break;
  9. case '3' :
  10. //location.href = cart_url;
  11. openDiv_chen(result.content)
  12. break;
复制代码

在最后一行后面加上：
  1. function openDiv_chen(cartinfo)
  2. {
  3. var _id = "speDiv";
  4. var m = "mask";
  5. if (docEle(_id)) document.removeChild(docEle(_id));
  6. if (docEle(m)) document.removeChild(docEle(m));
  7. //计算上卷元素值
  8. var scrollPos;
  9. if (typeof window.pageYOffset != 'undefined')
  10. {
  11. scrollPos = window.pageYOffset;
  12. }
  13. else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
  14. {
  15. scrollPos = document.documentElement.scrollTop;
  16. }
  17. else if (typeof document.body != 'undefined')
  18. {
  19. scrollPos = document.body.scrollTop;
  20. }
  21. var i = 0;
  22. var sel_obj = document.getElementsByTagName('select');
  23. while (sel_obj[i])
  24. {
  25. sel_obj[i].style.visibility = "hidden";
  26. i++;
  27. }
  28. // 新激活图层
  29. var newDiv = document.createElement("div");
  30. newDiv.id = _id;
  31. newDiv.style.position = "absolute";
  32. newDiv.style.zIndex = "10000";
  33. newDiv.style.width = "300px";
  34. newDiv.style.height = "100px";
  35. newDiv.style.top = (parseInt(scrollPos + 200)) + "px";
  36. newDiv.style.left = (parseInt(document.body.offsetWidth) ) / 2 + "px"; // 屏幕居中
  37. newDiv.style.overflow = "auto";
  38. newDiv.style.background = "#FFF";
  39. newDiv.style.border = "3px solid #FF6600";
  40. newDiv.style.padding = "5px";
  41. //生成层内内容
  42. newDiv.innerHTML = "<span style='float:right'> <a href='javascript:cancel_div()' style='color:red'>[关闭]</a></span>"+"<center><div style='font-size:14px;font-weight:bold;clear:both;'>商品成功放入购物车</div><div style='clear:both'>"+ cartinfo+"</div></center><br/>";
  43. newDiv.innerHTML += "<center><a href='flow.php'>进入购物车</a> <a href='javascript:cancel_div()'>继续购物</a></center>";
  44. document.body.appendChild(newDiv);
  45. // mask图层
  46. var newMask = document.createElement("div");
  47. newMask.id = m;
  48. newMask.style.position = "absolute";
  49. newMask.style.zIndex = "9999";
  50. newMask.style.width = "100%";
  51. newMask.style.height = document.body.scrollHeight + "px";
  52. newMask.style.top = "0px";
  53. newMask.style.left = "0px";
  54. newMask.style.background = "#000";
  55. newMask.style.filter = "alpha(opacity=60)";
  56. newMask.style.opacity = "0.40";
  57. document.body.appendChild(newMask);
  58. }
复制代码


如果成功了，大家说一声，回复一下。

回答：
能不能让他变成不是一个层。意思就是只要客户能看到这些就行，不一定要去点击关闭才行



可以用，效果不错,暂时还没发现什么问题

如果把哪个层，美化上，好看点，哪更好啦，这样直接使用可以，不用花时间去改来改去