首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

使用openSpeDiv方法实现Ecshop登录弹窗框效果

Posted in Javascript onMarch 13, 2017

在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登录弹窗框效果

以上所述是小编给大家介绍的使用openSpeDiv方法实现Ecshop登录弹窗框效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

使用openSpeDiv方法实现Ecshop登录弹窗框效果

- Author -

likyqp

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
prettify 代码高亮着色器google出品
Dec 28 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 #Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 #Javascript
JS实现的简单拖拽功能示例
Mar 13 #Javascript
jQuery中layer分页器的使用
Mar 13 #Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 #Javascript
Node.js调试技术总结分享
Mar 12 #Javascript
JavaScript中双符号的运算详解
Mar 12 #Javascript
Counter(1) Xpath(1) MIME(1) redo log(1) binlog(2) 写入策略(1) 爬虫(2) 优化(1) 抖音(1) LOGO(1)
You might like
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
destoon复制新模块的方法
2014/06/21 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
用python求一重积分和二重积分的例子
2019/12/06 Python
pytorch标签转onehot形式实例
2020/01/02 Python
QML实现钟表效果
2020/06/02 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
英国和国际包裹递送：ParcelCompare
2019/08/26 全球购物
英文版销售经理个人求职信
2013/11/20 职场文书
英文商务邀请信
2014/01/22 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
社区国庆节活动总结
2015/03/23 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
家装业务员岗位职责
2015/04/03 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS