欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2017年03月13日 08:59:47   作者:likyqp  
在ECSHOP的目錄/JS/common.js中有一個openSpeDiv方法是實現(xiàn)ECSHOP的彈窗效果的。接下來通過本文給大家分享使用openSpeDiv方法實現(xiàn)Ecshop登錄彈窗框效果,需要的朋友參考下

在ECSHOP的目錄/JS/common.js中有一個openSpeDiv方法是實現(xiàn)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"; 
 //生成層內(nèi)內(nèi)容 
 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> 

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

<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> 

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

要制作一個登錄彈窗框,我們再把需要傳入的參數(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)); 
 //計算上卷元素值 
 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;} 

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

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

效果如圖:

以上所述是小編給大家介紹的使用openSpeDiv方法實現(xiàn)Ecshop登錄彈窗框效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 圖片加載完成再執(zhí)行事件的實例

    圖片加載完成再執(zhí)行事件的實例

    下面小編就為大家分享一篇圖片加載完成再執(zhí)行事件的實例,具有很好的參考價值,一起跟隨小編過來看看吧,希望對大家有所幫助
    2017-11-11
  • 利用js的Node遍歷找到repeater的一個字段實例介紹

    利用js的Node遍歷找到repeater的一個字段實例介紹

    本文教大家使用js的Node遍歷找到repeater的一個字段的具體實現(xiàn)思路,感興趣的朋友可參考下,希望可以幫助到你
    2013-04-04
  • innerHTML在IE中報錯解決方案

    innerHTML在IE中報錯解決方案

    這篇文章主要介紹了innerHTML在IE中報錯解決方案,需要的朋友可以參考下
    2014-12-12
  • WordPress中利用AJAX異步獲取評論用戶頭像的方法

    WordPress中利用AJAX異步獲取評論用戶頭像的方法

    這篇文章主要介紹了WordPress中利用AJAX異步獲取評論用戶頭像的方法,文中的例子是輸入郵箱即可獲取頭像,需要的朋友可以參考下
    2016-01-01
  • Ionic如何實現(xiàn)下拉刷新與上拉加載功能

    Ionic如何實現(xiàn)下拉刷新與上拉加載功能

    在日常項目開發(fā)中我們經(jīng)常見到下拉刷新上拉加載的功能,接下來通過本文給大家介紹ionic如何實現(xiàn)下拉刷新與上拉加載的相關(guān)資料,需要的朋友可以參考下
    2016-06-06
  • 原生javascript實現(xiàn)圖片彈窗交互效果

    原生javascript實現(xiàn)圖片彈窗交互效果

    這篇文章主要介紹了原生javascript實現(xiàn)圖片彈窗交互效果的方法及的相關(guān)資料,需要的朋友可以參考下
    2015-01-01
  • 頁面定時刷新(1秒刷新一次)

    頁面定時刷新(1秒刷新一次)

    頁面定時刷新的示例想必大家也見到不少,在本文將為大家介紹的是,如何實現(xiàn)1秒刷新一次,感興趣的朋友可以了解下本文
    2013-11-11
  • 如何檢測JavaScript的各種類型

    如何檢測JavaScript的各種類型

    在寫js腳本的時候我們必須對一件事保持警惕,就是避免異常的發(fā)生。在本篇文章里面,我想談?wù)勔徊糠诸愋蜋z測,有需要的可以參考學(xué)習(xí)。
    2016-07-07
  • 分享JavaScript?中的幾種繼承方式

    分享JavaScript?中的幾種繼承方式

    這篇文章主要介紹了分享JavaScript?中的幾種繼承方式,JavaScript中的繼承主要是通過原型鏈實現(xiàn)的,具體實現(xiàn)需要的小伙伴可以參考下面文章詳細(xì)內(nèi)容
    2022-05-05
  • JS實現(xiàn)雙擊內(nèi)容變?yōu)榭删庉嫚顟B(tài)

    JS實現(xiàn)雙擊內(nèi)容變?yōu)榭删庉嫚顟B(tài)

    在一些網(wǎng)站上我們經(jīng)??吹浇换バ院軓姷墓δ?。一些用戶資料可以直接雙擊出現(xiàn)文本框,并在此輸入新的資料即可修改,無需再按確定按鈕等。怎么實現(xiàn)的呢?今天小編給大家分享JS實現(xiàn)雙擊內(nèi)容變?yōu)榭删庉嫚顟B(tài),需要的的朋友參考下
    2017-03-03

最新評論