如何使用openSpeDiv方法实现Ecshop登录弹窗框效果-创新互联

这篇文章主要介绍如何使用openSpeDiv方法实现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 = '' + select_spe + ""; 
 for (var spec = 0; spec < message.length; spec++) 
 { 
   newDiv.innerHTML += '' + message[spec]['name'] + ''; 
   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 += "" + message[spec]['values'][val_arr]['label'] + ' [' + message[spec]['values'][val_arr]['format_price'] + ']';    
     } 
     else 
     { 
      newDiv.innerHTML += "" + message[spec]['values'][val_arr]['label'] + ' [' + message[spec]['values'][val_arr]['format_price'] + ']';    
     } 
    }  
    newDiv.innerHTML += ""; 
   } 
   else 
   { 
    for (var val_arr = 0; val_arr < message[spec]['values'].length; val_arr++) 
    { 
     newDiv.innerHTML += "" + message[spec]['values'][val_arr]['label'] + ' [' + message[spec]['values'][val_arr]['format_price'] + ']';    
    } 
    newDiv.innerHTML += ""; 
   } 
 } 
 newDiv.innerHTML += "[" + btn_buy + "] [" + is_cancel + "]"; 
 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 += '' + message[spec]['name'] + ''; 
   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 += "" + message[spec]['values'][val_arr]['label'] + ' [' + message[spec]['values'][val_arr]['format_price'] + ']';    
     } 
     else 
     { 
      newDiv.innerHTML += "" + message[spec]['values'][val_arr]['label'] + ' [' + message[spec]['values'][val_arr]['format_price'] + ']';    
     } 
    }  
    newDiv.innerHTML += ""; 
   } 
   else 
   { 
    for (var val_arr = 0; val_arr < message[spec]['values'].length; val_arr++) 
    { 
     newDiv.innerHTML += "" + message[spec]['values'][val_arr]['label'] + ' [' + message[spec]['values'][val_arr]['format_price'] + ']';    
    } 
    newDiv.innerHTML += ""; 
   } 
 } 
 newDiv.innerHTML += "[" + btn_buy + "] [" + is_cancel + "]";

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

要制作一个登录弹窗框，我们再把需要传入的参数去掉，改一下方法名，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 = '用户名：
密码：

登录 关闭'; 
 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文件上把弹窗登录按钮显示到你想添加的位置，加上这一代码段：

弹窗登录

再修改一下样式，让其更漂亮。样式修改在模板目录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登录弹窗框效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享题目：如何使用openSpeDiv方法实现Ecshop登录弹窗框效果-创新互联
标题来源：http://cdiso.cn/article/pgejp.html