這篇文章主要介紹如何使用openSpeDiv方法實現(xiàn)Ecshop登錄彈窗框效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
玉州網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、成都響應式網(wǎng)站建設等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)公司2013年至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(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;
}
var i = 0;
var sel_obj = document.getElementsByTagName('select');
while (sel_obj[i])
{
sel_obj[i].style.visibility = "hidden";
i++;
}
// 新激活圖層
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 = '' + select_spe + "";
for (var spec = 0; spec < message.length; spec++)
{
newDiv.innerHTML += '' + message[spec]['name'] + '';
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 += "" + message[spec]['values'][val_arr]['label'] + ' [' + message[spec]['values'][val_arr]['format_price'] + ']" + message[spec]['values'][val_arr]['label'] + ' [' + message[spec]['values'][val_arr]['format_price'] + ']" + message[spec]['values'][val_arr]['label'] + ' [' + message[spec]['values'][val_arr]['format_price'] + '][" + btn_buy + "] [" + is_cancel + "] ";
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);
}
var i = 0;
var sel_obj = document.getElementsByTagName('select');
while (sel_obj[i])
{
sel_obj[i].style.visibility = "hidden";
i++;
} 上面代碼是與下拉選擇框有關，去掉。
