使用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登录弹窗框效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 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
You might like
php高级编程-函数-郑阿奇
2011/07/04 PHP
YII中assets的使用示例
2014/07/31 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
python合并同类型excel表格的方法
2018/04/01 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
小学家长会邀请函
2014/01/23 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
新手必备Python开发环境搭建教程
2021/05/28 Python
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技