代码中创建一个DIV层
大家好
刚看到一个JS代码.他现在只是能弹出一个图层对话框出来.现在想把他改成同时弹出两个图层.对话框为前景. 另外一个图层为背景.这样出来的效果就会很好看些.
不废话了.上代码
JS代码
=========================================================
<script>
window.addEvent('domready',function(){
var curLH = location.href;
if(["-?loginBuy\.html"].some(function(r){
return curLH.test(new RegExp(r));
})){return false;}
var MiniPassport = new Object();
var miniPassportDialog = new Element('div',{'class':'dialog mini-passport-dialog','id':'dialog1'}).set('html',$E('#template-modal .dialog').get('html').substitute({
title:'登录',
content:''
})).setStyles({
display:'none',
width:0,
height:'auto'
}).adopt(new Element('iframe',{src:'javascript:void(0);',styles:{position:'absolute',
zIndex:-1,
border:'none',
top:0,
left:0,
'filter':'alpha(opacity=0)'
},width:'100%',height:'100%'})).inject(document.body);
var mpdSize = {
loginBuy:{width:570},
};
$extend(MiniPassport,{
show:function(from,options){
var handle = this.handle = from;
options = this.options = options ||{};
var remoteURL = options.remoteURL||(handle?handle.get('href'):false);
var act ="login";
act = remoteURL.match(/-([^-]*?)\.html/)[1];
if(miniPassportDialog.style.display=='none'){
var _styles = {display:'block'};
miniPassportDialog.setStyles(_styles);
}
miniPassportDialog.getElement('.dialog-content').empty();
var fxValue = mpdSize[act];
fxValue.opacity = 1;
miniPassportDialog.setStyles(fxValue).amongTo(window);
// if(window.ie6) remoteURL=(remoteURL.substring(0,4)=='http')?remoteURL:remoteURL;
$pick(this.request,{cancel:$empty}).cancel();
this.request = new Request.HTML({update:miniPassportDialog.getElement('.dialog-content').set('html',' 正在加载...'),onComplete:function(){
MiniPassport.onload.call(MiniPassport);
}}).get(remoteURL,$H({mini_passport:1}));
},
hide:function(chain){
miniPassportDialog.getElement('.dialog-content').empty();
miniPassportDialog.hide();
if($type(chain)=='function'){chain.call(this)}
miniPassportDialog.eliminate('chain');
miniPassportDialog.eliminate('margedata');
},
onload:function(){
var dialogForm = miniPassportDialog.getElement('form');
miniPassportDialog.retrieve('margedata',[]).each(function(item){
item.t = item.t||'hidden';
new Element('input',{type:item.t,name:item.n,value:item.v}).inject(dialogForm);
});
dialogForm.addEvent('submit',function(e){
e.stop();
var form = this;
if(!MiniPassport.checkForm.call(MiniPassport))return MessageBox.error('请完善必填信息!');
new Request({
method:form.get('method'),
url:form.get('action'),
onRequest:function(){
form.getElement('input[type=submit]').set({disabled:true,styles:{opacity:.4}});
},onComplete:function(re){
form.getElement('input[type=submit]').set({disabled:false,styles:{opacity:1}});
var _re = [];
re.replace(/\\?\{([^{}]+)\}/g, function(match){
if (match.charAt(0) == '\\') return _re.push(JSON.decode(match.slice(1)));
_re.push(JSON.decode(match));
});
var errormsg = [];
var plugin_url;
_re.each(function(item){
if(item.status =='failed'){
errormsg.push(item.msg);
}
if(item.status =='plugin_passport'){
plugin_url = item.url;
}
});
if(errormsg.length)return MessageBox.error(errormsg.join('<br/>'));
if(plugin_url){
MiniPassport.hide.call(MiniPassport,$pick(miniPassportDialog.retrieve('chain'),function(){
MessageBox.success('正在转向...');
location.href = plugin_url;
}));
}else{
MiniPassport.hide.call(MiniPassport,$pick(miniPassportDialog.retrieve('chain'),function(){
MessageBox.success('用户登录成功,正在转向...');
location.reload();
}));
}
}}).send(form);
});
miniPassportDialog.getElement('.close').addEvent('click',this.hide.bind(this));
miniPassportDialog.amongTo(window);
},
checkForm:function(){
var inputs = miniPassportDialog.getFormElements();
var ignoreIpts = $$(miniPassportDialog.getElements('form input[type=hidden]'),miniPassportDialog.getElements('form input[type=submit]'));
ignoreIpts.each(inputs.erase.bind(inputs));
if(inputs.some(function(ipt){
if(ipt.value.trim()==''){
ipt.focus();
return true;
}
})){
return false;
}
return true;
}
});
</script>
目前前台显示的HTML（FIERBUG查看）
================================
<div id="dialog1" class="dialog mini-passport-dialog" style="width: 570px; height: auto; visibility: visible; opacity: 1; position: absolute; top: 615px; left: 386px;">
希望大家能帮忙达到
================================
<div id="dialog1" class="dialog mini-passport-dialog" style="width: 570px; height: auto; visibility: visible; opacity: 1; position: absolute; top: 615px; left: 386px;">
<div class="dialog2" style="z-index: 1341; width: 100%; height: 100%; display: block;"></div>
两个图层一上 一下
CSS的部分回头我自己修改一下就好了。
先谢过大家了。
[解决办法]
<div class="dialog2" style="z-index: 1341; width: 100%; height: 100%; display: block;"></div>
你动态生成这个层添加到body上，然后position：absolute;top:0;left:0;background:rgba(33,33,33,.3);就可以添加这个背景层，然后再将对话框的z-index设置为1342，它就在背景层之上了
