代码中创建一个DIV层

Question

大家好刚看到一个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','&nbsp;&nbsp;正在加载...'),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的部分回头我自己修改一下就好了。
先谢过大家了。

Answer 1

<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，它就在背景层之上了

Answer 2

现在就是因为div class="dialog2" 这个图层无法生成.所以希望JS在生成dialog1 的同时生成dialog2 之后才可调整CSS