ECSHOP中制作登录弹窗框

在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; }  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 = "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>";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>";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);
}

 var i = 0;var sel_obj = document.getElementsByTagName('select');while (sel_obj[i]){sel_obj[i].style.visibility = "hidden";i++;}

上面代码是与下拉选择框有关，去掉。

 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>";

上面这与弹窗框里的内容有关，也去掉。

要制作一个登录弹窗框，我们再把需要传入的参数去掉，改一下方法名，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" οnclick="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();">弹窗登录</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'));
}

效果如图：

ECSHOP中制作登录弹窗框相关推荐

我的世界会员特效在服务器显示,腐竹教你在游戏中制作登录提示效果
来源:游戏园日期:2019-02-03 04:01:08 今天小编为大家带来我的世界登入提示教程,让大家知道登入提示怎么才能在游戏中显示出来,让你的服务器高大上! 这个东西做完以后成品是这样的: 1. ...
python中pygame增加对话框_在pygame中制作弹出窗口与pgu
我在用pygame编写的游戏中添加了一些gui元素(带有按钮的对话框).我环顾四周寻找一个体面的GUI工具包,并以pgu结束.无论如何,我试图让它弹出一个对话框,它确实(有点),但它不关闭.在pyga ...
弹出框口登录php代码,如何用JQuery写出登录弹出框
类似百度的登录弹出框,可用jquery的fadeIn(),hide(),show(),slideDown()等动画函数实现,一下为html5 代码: $(document).ready(functio ...
Django(part38)--制作登录界面
学习笔记,仅供参考,有错必究文章目录制作登录界面第一步第二步第三步第四步制作登录界面我们基于博客Django(part36)–cookies的mywebsite_bookstore项目 ...
用JavaScript 制作多彩的弹出式说明窗口
用JavaScript 制作多彩的弹出式说明窗口在设计网站的时候,在网站有重大的变动,或者需要作什么声明的时候,我们就要用到弹出窗口,这时只要我们一进入这个页面,就会弹出一个窗口,其实要制作这样的弹 ...
和表头对齐表格_表格技巧—如何在Excel表格中制作三栏表头
在Excel表格中没有Word文档的制作多栏表头的功能那么强大,但是尽管如此很多时候我们工作中做一些统计表格仍然需要制作三栏的表头.平时你是怎么制作的呢?如果你还不是很清楚,那今天小编就和大家分享一个 ...
linux字符界面播放vcd,在Linux中制作VCD
在Linux中制作VCD 发布时间:2006-03-25 01:04:08来源:红联作者:zz123 ---- 也许您还在使用Windows的原因之一是Windows强大的多媒体支持能力,例如制作个性 ...
(转)如何在Excel2013中制作条形码
文章来源:http://www.officezhushou.com/excel2013/3905.html 注意:如果发现条形码不能移动的情况,请点击开发工具-设计模式,那么你就可以移动你的条形码了 ...
excel批量制作条形码_如何在Microsoft Excel中制作条形图
excel批量制作条形码 A bar chart (or a bar graph) is one of the easiest ways to present your data in Excel, ...

ECSHOP中制作登录弹窗框

ECSHOP中制作登录弹窗框相关推荐

最新文章

热门文章