如何使用openSpeDiv方法實現(xiàn)Ecshop登錄彈窗框效果
這篇文章主要介紹如何使用openSpeDiv方法實現(xiàn)Ecshop登錄彈窗框效果，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！
玉州網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護(hù)。創(chuàng)新互聯(lián)公司2013年至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。
在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 > 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)，也去掉。
要制作一個登錄彈窗框，我們再把需要傳入的參數(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登錄彈窗框效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
新聞名稱：如何使用openSpeDiv方法實現(xiàn)Ecshop登錄彈窗框效果
瀏覽地址：http://muchs.cn/article36/ighjpg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、搜索引擎優(yōu)化、電子商務(wù)、企業(yè)網(wǎng)站制作、營銷型網(wǎng)站建設(shè)、服務(wù)器托管
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 營銷型網(wǎng)站建設(shè)客戶咨詢，只有開頭沒有終點 2016-02-16
- 企業(yè)營銷型網(wǎng)站建設(shè)的特別之處 2021-08-19
- 營銷型網(wǎng)站建設(shè)必備功能 2022-11-29
- 營銷型網(wǎng)站建設(shè)需要具備哪些條件 2021-11-15
- 企業(yè)營銷型網(wǎng)站建設(shè)怎樣建立信任體系 2016-02-11
- 影響營銷型網(wǎng)站建設(shè)成功與否的因素都有哪些 2022-05-01
- 營銷型網(wǎng)站建設(shè)將取代傳統(tǒng)型網(wǎng)站建設(shè)的原因 2016-05-07
- 營銷型網(wǎng)站建設(shè)基本流程 2022-07-14
- 營銷型網(wǎng)站建設(shè)怎么做？ 2022-12-23
- 南陽高端營銷型網(wǎng)站建設(shè)需要提前準(zhǔn)備什么？ 2022-05-19
- 如何為營銷型網(wǎng)站建設(shè)營銷計劃 2016-10-17
- 營銷型網(wǎng)站建設(shè)三招提升你網(wǎng)站的吸引力 2022-07-10