ECSHOP中制作登录弹窗框

最新推荐文章于 2018-09-02 15:51:09 发布
最新推荐文章于 2018-09-02 15:51:09 发布
阅读量848 收藏 1
点赞数
分类专栏： ECSHOP二次开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/likyqp/article/details/61619196
版权

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

效果如图：




likyqp
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js弹出框、对话框、提示框、弹窗总结
weixin_30312557的博客
07-25 2302
一、JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 function ale() { //弹出一个对话框 alert("提示信息！"); } //弹出一个询问框，有确定和取消按钮 f...
ecshop弹出登录框的效果
05-06 1415
1.打开你的模版下library/member_info.lbi 文件，在里面添加如下的代码。 &lt;script type=”text/javascript”&gt; function login_module(){//点击登录时，调用的函数 var mengban=document.getElementByIdx_x(“mengban”); mengban.className=”mengb...
ecshop 浮动弹出式网页窗口
01-17
ecshop 浮动弹出式网页窗口
ecshop实现弹出登录框
weixin_30291791的博客
12-16 198
自从远通汽配商城上线到现在已经两个多月了，一个问题一直困扰着我，就是在未登录状态下，点击购买商品时，跳转到登录页面，登录后，又不能自动跳转到购物车页面，甚至连刚才浏览的商品都要重新回去查找，客户体验非常不好，在把小京东V4的注册页面整合到我们商城后，对整个系统的架构有了进一步的了解，于是就开始解决这个问题，经过两天的努力，终于实现了在未登录状态下，点击购买，弹出登录框，登录后，跳转到购物车页面。效...
使用openSpeDiv方法实现Ecshop登录弹窗框效果
10-20
总之，`openSpeDiv`方法是ECSHOP中用于创建动态弹窗的重要工具。通过对页面元素的操作和CSS样式的应用，它能够在不影响其他页面元素的情况下，提供一个独立的、用户友好的交互界面。对于开发者来说，理解并掌握这个...
ECSHOP中实现ajax弹窗登录功能
10-20
本文主要给大家介绍在ecshop中实现ajax弹窗登录功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下
ecshop模板制作引导手册.pdf
04-29
### ECShop模板制作引导手册知识点概述 #### 一、ECShop简介 - **定义与背景**：ECShop是一款由Comsenz公司推出的B2C独立网店系统，适用于企业和个人快速搭建个性化在线商店。 - **技术架构**：ECShop基于PHP语言...
ECSHOP首页弹出分类菜单
weixin_30679823的博客
05-31 131
<script language="javascript"> function omshow(id,str) { var obj=document.getElementById('omshow'+id); obj.style.display=str; } </script> <ul class="menu j_Menu" style="he...
ecshop购物车实现弹出框效果
weixin_34315189的博客
12-09 224
  本文章是以ecshop原始程序及默认模板为例进行讲述，不同的模板操作上略有不同，但原理都一样。   操作方法： 1、后台网店设置 购物车确定提示  选择为    "提示用户，点击“取消”进入购物车"   2、打开 js/common.js  104行 就是case '1'  替换之前的 if (confirm(result.message)) location.href...
弹出层
天野蓝图
04-29 535
 http://bbs.ecshop.com/viewthread.php?tid=124518 带遮罩层效果的弹出层。
弹出框model
行走在无冬之夜
12-09 1293
    Bootstrap 实例 - 模态框（Modal）插件       创建模态框（Modal）  开始演示模态框                    ×                模态框（Modal）标题                  在这里添加一些文本             关
div+css+js实现弹出框
热门推荐
半夏半暖半倾城的博客
09-02 6万+
面试被问到如何让弹出框居中，然而自己没有做过弹出框，搜资料，自己就试着做了一个。 效果：点击弹出框按钮后，页面上显示一个弹出框，并且背景要变成灰色，原始页面不能被操作的，直到关闭弹出框。  原理：在原页面的基础上添加两个格，一个是弹出层，一个是遮罩层，即背景层。这两个div和原始页面是在一个文件中，首先通过设置display：none;让这两个div不显示，然后通过给弹出框按钮和关闭按钮绑定事件...
confirm 确认框的一个实际应用
Sandy专栏
07-06 1万+
关于confirm 确认框有这样一个需求，就是需要先执行一段服务器端代码，然后弹出确认框让用户选择，选择之后根据选择的不同执行不同的代码。之前我的解决办法是http://topic.csdn.net/u/20090819/17/0F291A9E-05D1-46BC-BFAE-54188DB182A0.htmlhttp://topic.csdn.net/u/20090910/09/014AF035-3A05-42A3-91B2-51DD346B3F0E.html虽说可以解决问题，但一点也不优雅。之后因为自己没
js中confirm实现执行操作前弹出确认框的方法
凌晨de太阳
11-25 5574
本文实例讲述了js中confirm实现执行操作前弹出确认框的方法。分享给大家供大家参考。具体实现方法如下： 现在在删除或其它操作前弹出确定提示，我们有很多方法，最基本的就是利用js自带的函数confirm来操作了 最简单的用法如下： 鼠标事件使用confirm 复制代码 代码如下: 点击确定 想简单点调用的话  也可以这样 复制代码 代码如下: 点击确定 点击超链接后如果
js中三种弹出框
weixin_33798152的博客
03-16 6109
javascript的三种对话框是通过调用window对象的三个方法alert()，confirm()和prompt()来获得，可以利用这些对话框来完成js的输入和输出，实现与用户能进行交互的js代码。 今天小编就来简单介绍一下js中的三种弹出对话框，小编先单独对这几个方法进行详细讲解，接着，将这几个方法进行对比，好了，开始我们的js之旅吧`(*∩_∩*)′...... 第一种：alert()...
ECshop模板制作完全指南
"ECshop_模板制作教程" ECShop是一款流行的开源电子商务平台，它的模板制作教程是为那些希望自定义电商平台外观的新手准备的。通过学习这个教程，用户可以掌握如何创建和修改ECShop的模板，以适应特定行业和客户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值