在ECSHOP的目录/JS/common.js中有一个openSpeDiv方法是实现ECSHOP的弹窗效果的。如果我们想制作一个登录弹窗框,可以截取这个方法里的部分代码。
//生成属性选择层 function openSpeDiv(message, goods_id, parent) { 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; } <span style="color:#ff0000;"> var i = 0; var sel_obj = document.getElementsByTagName('select'); while (sel_obj[i]) { sel_obj[i].style.visibility = "hidden"; i++; }</span> // 新激活图层 var newDiv = document.createElement("div"); newDiv.id = _id; newDiv.style.position = "absolute"; newDiv.style.zIndex = "10000"; newDiv.style.width = "300px"; newDiv.style.height = "260px"; newDiv.style.top = (parseInt(scrollPos + 200)) + "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;">' + select_spe + "</h4>"; <span style="color:#ff0000;">for (var spec = 0; spec < message.length; spec++) { newDiv.innerHTML += '<hr style="color: #EBEBED; height:1px;"><h6 style="text-align:left; background:#ffffff; margin-left:15px;">' + message[spec]['name'] + '</h6>'; if (message[spec]['attr_type'] == 1) { for (var val_arr = 0; val_arr < message[spec]['values'].length; val_arr++) { if (val_arr == 0) { newDiv.innerHTML += "<input style='margin-left:15px;' type='radio' name='spec_" + message[spec]['attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "' id='spec_value_" + message[spec]['values'][val_arr]['id'] + "' checked /><font color=#555555>" + message[spec]['values'][val_arr]['label'] + '</font> [' + message[spec]['values'][val_arr]['format_price'] + ']</font><br />'; } else { newDiv.innerHTML += "<input style='margin-left:15px;' type='radio' name='spec_" + message[spec]['attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "' id='spec_value_" + message[spec]['values'][val_arr]['id'] + "' /><font color=#555555>" + message[spec]['values'][val_arr]['label'] + '</font> [' + message[spec]['values'][val_arr]['format_price'] + ']</font><br />'; } } newDiv.innerHTML += "<input type='hidden' name='spec_list' value='" + val_arr + "' />"; } else { for (var val_arr = 0; val_arr < message[spec]['values'].length; val_arr++) { newDiv.innerHTML += "<input style='margin-left:15px;' type='checkbox' name='spec_" + message[spec]['attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "' id='spec_value_" + message[spec]['values'][val_arr]['id'] + "' /><font color=#555555>" + message[spec]['values'][val_arr]['label'] + ' [' + message[spec]['values'][val_arr]['format_price'] + ']</font><br />'; } newDiv.innerHTML += "<input type='hidden' name='spec_list' value='" + val_arr + "' />"; } } newDiv.innerHTML += "<br /><center>[<a href='javascript:submit_div(" + goods_id + "," + parent + ")' class='f6' >" + btn_buy + "</a>] [<a href='javascript:cancel_div()' class='f6' >" + is_cancel + "</a>]</center>";</span> 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); } <span style="color: rgb(255, 0, 0);"> var i = 0; var sel_obj = document.getElementsByTagName('select'); while (sel_obj[i]) { sel_obj[i].style.visibility = "hidden"; i++; }</span>
上面代码是与下拉选择框有关,去掉。
<span style="color: rgb(255, 0, 0);">for (var spec = 0; spec < message.length; spec++) { newDiv.innerHTML += '<hr style="color: #EBEBED; height:1px;"><h6 style="text-align:left; background:#ffffff; margin-left:15px;">' + message[spec]['name'] + '</h6>'; if (message[spec]['attr_type'] == 1) { for (var val_arr = 0; val_arr < message[spec]['values'].length; val_arr++) { if (val_arr == 0) { newDiv.innerHTML += "<input style='margin-left:15px;' type='radio' name='spec_" + message[spec]['attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "' id='spec_value_" + message[spec]['values'][val_arr]['id'] + "' checked /><font color=#555555>" + message[spec]['values'][val_arr]['label'] + '</font> [' + message[spec]['values'][val_arr]['format_price'] + ']</font><br />'; } else { newDiv.innerHTML += "<input style='margin-left:15px;' type='radio' name='spec_" + message[spec]['attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "' id='spec_value_" + message[spec]['values'][val_arr]['id'] + "' /><font color=#555555>" + message[spec]['values'][val_arr]['label'] + '</font> [' + message[spec]['values'][val_arr]['format_price'] + ']</font><br />'; } } newDiv.innerHTML += "<input type='hidden' name='spec_list' value='" + val_arr + "' />"; } else { for (var val_arr = 0; val_arr < message[spec]['values'].length; val_arr++) { newDiv.innerHTML += "<input style='margin-left:15px;' type='checkbox' name='spec_" + message[spec]['attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "' id='spec_value_" + message[spec]['values'][val_arr]['id'] + "' /><font color=#555555>" + message[spec]['values'][val_arr]['label'] + ' [' + message[spec]['values'][val_arr]['format_price'] + ']</font><br />'; } newDiv.innerHTML += "<input type='hidden' name='spec_list' value='" + val_arr + "' />"; } } newDiv.innerHTML += "<br /><center>[<a href='javascript:submit_div(" + goods_id + "," + parent + ")' class='f6' >" + btn_buy + "</a>] [<a href='javascript:cancel_div()' class='f6' >" + is_cancel + "</a>]</center>";</span>
上面这与弹窗框里的内容有关,也去掉。
要制作一个登录弹窗框,我们再把需要传入的参数去掉,改一下方法名,var _id和var m的值,然后在newDiv.innerHTML 里面加上你想在弹窗框显示的HTML代码即可改写该方法。
新方法如下:
//弹窗登录 function openLoginDiv() { var _id = "loginDiv"; var m = "loginMask"; 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 newDiv = document.createElement("div"); newDiv.id = _id; newDiv.style.position = "absolute"; newDiv.style.zIndex = "10000"; newDiv.style.width = "300px"; newDiv.style.height = "260px"; newDiv.style.top = (parseInt(scrollPos + 200)) + "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 = '<form id="ajax_loginForm">用户名:<br><input type="text" name="username" id="ajax_username"/>密码:<br><input type="password" name="username" id="ajax_password"/><br><button type="button">登录</button> <button type="button" onclick="closeLoginForm()">关闭</button></form>'; 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); }
然后在themes/default/library/page_header.lbi文件上把弹窗登录按钮显示到你想添加的位置,加上这一代码段:
<a href="JavaScript:openLoginDiv();" rel="external nofollow" >弹窗登录</a>
再修改一下样式,让其更漂亮。样式修改在模板目录themes/default/style.css。加上这一段:
#ajax_loginForm{padding:10px; line-height:2em;} #ajax_loginForm input{width:98%; height:35px; padding:0 1%; line-height:35px; border:1px solid #e7e7e7; border-radius:3px;} #ajax_loginForm button{background:#ff6599; border: none; color:#fff; font-size:16px; border-radius:3px; padding:5px 15px; cursor:pointer;}
最后再写个关闭弹窗的js事件即可。方法我写在common.js文件下的openLoginDiv()之后
function closeLoginForm(){ document.body.removeChild(docEle('loginDiv')); document.body.removeChild(docEle('loginMask')); }
效果如图:
以上所述是小编给大家介绍的使用openSpeDiv方法实现Ecshop登录弹窗框效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
标签:
ecshop登录弹出框
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“使用openSpeDiv方法实现Ecshop登录弹窗框效果”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年11月14日
2024年11月14日
- 黑鸭子2010-再度重相逢[首版][WAV+CUE]
- 【原神手游】5.2版本圣遗物优化详情
- 方季惟.1989-一生只爱一次【蓝与白】【WAV+CUE】
- 群星.1997-强力舞曲总动员【金点】【WAV+CUE】
- 盘尼西林.2024-岛与黎明【智慧大狗】【FLAC分轨】
- 刀郎《柔情经典》 2CD[WAV分轨][3.8G]
- 群星2024《民谣精选》原音母版1:1直刻[低速原抓WAV+CUE][1.1G]
- 经典《泰坦尼克号原声大碟》[WAV+DSF+FLAC多版][5.2G]
- 魔兽世界兽王猎输出宏代码是什么 兽王猎翻页输出宏命令代码分享
- 魔兽世界wlk野德一键输出宏是什么 wlk野德一键输出宏介绍
- wlk鸟德一键输出宏是什么 wlk鸟德一键输出宏介绍
- 《明末:渊虚之羽》外网新宣传:有勇气面对障碍吗?
- 视觉盛宴!V社公布《看火人》团队新作水面物理效果演示
- 张艺谋呼吁观众走进影院看电影:对解说短视频很无语
- 车载音乐最强享受 《车载极致女声精选》[WAV分轨][1G]