在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> 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>' + select_spe + "</h4>"; <span>for (var spec = 0; spec < message.length; spec++) { newDiv.innerHTML += '<hr><h6>' + 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 type='radio'attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "'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 type='radio'attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "'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' value='" + val_arr + "' />"; } else { for (var val_arr = 0; val_arr < message[spec]['values'].length; val_arr++) { newDiv.innerHTML += "<input type='checkbox'attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "'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' value='" + val_arr + "' />"; } } newDiv.innerHTML += "<br /><center>[<a href='javascript:submit_div(" + goods_id + "," + parent + ")' >" + btn_buy + "</a>] [<a href='javascript:cancel_div()' >" + 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>
上面代码是与下拉选择框有关，去掉。
<span>for (var spec = 0; spec < message.length; spec++) { newDiv.innerHTML += '<hr><h6>' + 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 type='radio'attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "'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 type='radio'attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "'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' value='" + val_arr + "' />"; } else { for (var val_arr = 0; val_arr < message[spec]['values'].length; val_arr++) { newDiv.innerHTML += "<input type='checkbox'attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "'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' value='" + val_arr + "' />"; } } newDiv.innerHTML += "<br /><center>[<a href='javascript:submit_div(" + goods_id + "," + parent + ")' >" + btn_buy + "</a>] [<a href='javascript:cancel_div()' >" + is_cancel + "</a>]</center>";</span>
上面这与弹窗框里的内容有关，也去掉。