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