欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-07 09:25:18
在ecshop的目录/js/common.js中有一个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;  
 } 
<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登录弹窗框效果,希望对大家有所帮助