如何使用openSpeDiv方法實(shí)現(xiàn)Ecshop登錄彈窗框效果-創(chuàng)新互聯(lián)

這篇文章主要介紹如何使用openSpeDiv方法實(shí)現(xiàn)Ecshop登錄彈窗框效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

為桃江等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及桃江網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、桃江網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

在ECSHOP的目錄/JS/common.js中有一個(gè)openSpeDiv方法是實(shí)現(xiàn)ECSHOP的彈窗效果的。如果我們想制作一個(gè)登錄彈窗框，可以截取這個(gè)方法里的部分代碼。

//生成屬性選擇層 
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)); 
 //計(jì)算上卷元素值 
 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 > 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"; 
 //生成層內(nèi)內(nèi)容 
 newDiv.innerHTML = '<h5 >' + select_spe + "</h5>"; 
 <span >for (var spec = 0; spec < message.length; spec++) 
 { 
   newDiv.innerHTML += '<hr ><h7 >' + message[spec]['name'] + '</h7>'; 
   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 > var i = 0; 
 var sel_obj = document.getElementsByTagName('select'); 
 while (sel_obj[i]) 
 { 
  sel_obj[i].style.visibility = "hidden"; 
  i++; 
 }</span>

上面代碼是與下拉選擇框有關(guān)，去掉。

<span >for (var spec = 0; spec < message.length; spec++) 
 { 
   newDiv.innerHTML += '<hr ><h7 >' + message[spec]['name'] + '</h7>'; 
   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>

上面這與彈窗框里的內(nèi)容有關(guān)，也去掉。

要制作一個(gè)登錄彈窗框，我們?cè)侔研枰獋魅氲膮?shù)去掉，改一下方法名，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)); 
 //計(jì)算上卷元素值 
 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"; 
 //生成層內(nèi)內(nèi)容 
 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()">關(guān)閉</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;}

最后再寫個(gè)關(guān)閉彈窗的js事件即可。方法我寫在common.js文件下的openLoginDiv()之后

function closeLoginForm(){ 
  document.body.removeChild(docEle('loginDiv')); 
  document.body.removeChild(docEle('loginMask')); 
}

效果如圖：

如何使用openSpeDiv方法實(shí)現(xiàn)Ecshop登錄彈窗框效果

以上是“如何使用openSpeDiv方法實(shí)現(xiàn)Ecshop登錄彈窗框效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁題目：如何使用openSpeDiv方法實(shí)現(xiàn)Ecshop登錄彈窗框效果-創(chuàng)新互聯(lián)
瀏覽路徑：http://muchs.cn/article28/pgejp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、品牌網(wǎng)站制作、Google、響應(yīng)式網(wǎng)站、外貿(mào)建站、網(wǎng)站維護(hù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容