您现在的位置是:首页 > 教程 > ecshop商城教程ecshop商城教程
ecshop商品点击购买弹出漂亮窗口提示修改示例
怜蕾2023-11-30 22:04:18ecshop商城教程已有人查阅
导读点击“购买之后”弹出一个提示框框。我看过了代码之后感觉有点复杂。而且弹出的层实际上是利用样式的“显示”和“隐藏”的属 来做的!而且弹出的位置死板!
点击“购买之后”弹出一个提示框框。我看过了代码之后感觉有点复杂。而且弹出的层实际上是利用样式的“显示”和“隐藏”的属 来做的!而且弹出的位置死板!
今天我研究了下之后发现了一个很简单的方法来实现这个功能!
一:把如下函数代码加入到common.js最末尾
二、找到addToCartResponse()函数,common.js大约64行左右。把里面的switch循环改成如下:
今天我研究了下之后发现了一个很简单的方法来实现这个功能!
一:把如下函数代码加入到common.js最末尾
* 点击购物后弹出提示层* Chen 2010.7.28 * 参数 cartinfo:购物车信息*
/function openDiv_chen(cartinfo)
{
var _id = "speDiv";
var m = "mask";
if (docEle(_id)) document.removeChild(docEle(_id));
if (docEle(m)) document.removeChild(docEle(m));
//计算上卷元素值
var scrollPos;
if (typeof window.pageYOffset != 'undefined')
{
scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
{
scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined')
{
scrollPos = document.body.scrollTop;
}
var i = 0;
var sel_obj = document.getElementsByTagName('select');
while (sel_obj[i])
{
sel_obj[i].style.visibility = "hidden";
i++;
}
// 新激活图层
var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "10000";
newDiv.style.width = "350px";
newDiv.style.height = "100px";
newDiv.style.top = (parseInt(scrollPos + 400)) + "px";
newDiv.style.left = (parseInt(document.body.offsetWidth) - 200) / 2 + "px";
// 屏幕居中
newDiv.style.overflow = "auto";
newDiv.style.background = "#FFF";
newDiv.style.border = "3px solid #59B0FF";
newDiv.style.padding = "5px";
//生成层内内容
newDiv.innerHTML = '<h4 style="font-size:14; margin:15 0 0 15;">' + "商品成功放入购物车 [<a href='javascript:cancel_div()' class='f6' >" + '关闭' + "</a>]<br><br>"+ cartinfo + "</h4>";
newDiv.innerHTML += "<br /><center><a href='flow.php'>进入购物车</a> <a [<a href='javascript:cancel_div()'>继续购物</a></center>"; document.body.appendChild(newDiv);
// mask图层
var newMask = document.createElement("div");
newMask.id = m;
newMask.style.position = "absolute";
newMask.style.zIndex = "9999";
newMask.style.width = document.body.scrollWidth + "px";
newMask.style.height = document.body.scrollHeight + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
newMask.style.background = "#FFF";
newMask.style.filter = "alpha(opacity=30)";
newMask.style.opacity = "0.40";
document.body.appendChild(newMask);}
这个函数很简单!直接 ecshop中common.js的openSpeDiv()函数做个小修改即可!二、找到addToCartResponse()函数,common.js大约64行左右。把里面的switch循环改成如下:
switch(result.confirm_type)
{
case '1' :
//if (confirm(result.message)) location.href = cart_url;
openDiv_chen(result.content)//将购物车信息作为参数传入
break;
case '2' :
//if (!confirm(result.message)) location.href = cart_url;
openDiv_chen(result.content)
break;
case '3' :
//location.href = cart_url;
openDiv_chen(result.content)
break;
default :
break;
}
本文标签:
很赞哦! ()
相关文章
- ecshop商品列表页面和商品页面自定义url网址前缀的实现方法
- ecshop商品页显示商品收藏数量怎么修改
- ecshop商品批发多属性多规格多库存怎么批量购买
- ecshop水印ecshop商品添加水印的实现方法
- ecshop商品价格将属性价格改为直接价非加价修改的方法
- ecshop商品页商品详细描述内容调用商品相册图片代码的方法
- ecshop商品图片模糊修改图片上传压缩质量的方法
- ecshop商品相册显示顺序为正序的修改方法
- ecshop商品售完商品库存为0显示商品售完已售罄的实现方法
- ecshop商品详情页相关属性商品由新到旧排序的方法
- ecshop商品页商品浏览次数怎样修改按倍数增加
- ecshop商品页面定制属性附件上传文件上传图片
随机图文
-
ecshop文章详情页显示浏览次数的方法
1)、首先需要修改一下数据库结构进ECSHOP后台 》 数据库管理 》SQL查询 ,输入下面SQL语句 -
ecshop订单信息页或ecshop打印页显示商品缩略图
1、打开 admin/order.php 文件 (建议使用editplus)2、打开 admin/templates/order_info.htm 模板页增加红部分186行 -
ecshop购物车页面继续购物按钮变成回到上一步的修改方法
ecshop购物车页面继续购物按钮改成回到上一步的修改方法:大家都知道,ecshop 的购物车页面有的继续购物按钮是返回到首页的,而这样是非常不利于用户体验的 -
ecshop首页不同会员等级怎么显示不同商品价格
在ECSHOP首页显示各等级会员价格注意:以下操作尽量不要使用记事本来编辑,尤其是使用UTF-8编码的朋友们。
留言与评论 (共有 条评论) |