jquery ui dialog|popup 弹出窗口层

 

/***************************/
: adrian "yens" mato gondelle
:
:     
/***************************/
document.write('

 ');
document.write("");
//setting up our popup
//0 means disabled; 1 means enabled;
var popupstatus = 0;
var idcloses=new array("popupcontactclose","buttonclose");

var popupmodal='{idloadhtml:"popupcontact1",idmodaltitle:"弹出窗口测试",isusetitle:true,align:"center",modalwidth:"408px";modalheight:"384px",show:function(){ centerpopup();//load popup loadpopup();}}';
//popupmodal={idloadhtml:"popupcontact1",idmodaltitle:"弹出窗口测试",isusetitle:true};

//loading popup with jquery magic!
function loadpopup(){
 //loads popup only if it is disabled
 if(popupstatus==0){
  $("#backgroundpopup").css({
   "opacity": "0.7"
  });
  $("#backgroundpopup").fadein("slow");
  $("#popupcontact").fadein("slow");
  popupstatus = 1;
 }
}

//disabling popup with jquery magic!
function disablepopup(){
 //disables popup only if it is enabled
 if(popupstatus==1){
  $("#backgroundpopup").fadeout("slow");
  $("#popupcontact").fadeout("slow");
  popupstatus = 0;
 }
}

//centering popup
function centerpopup(){
 //request data for centering
 var windowwidth = document.documentelement.clientwidth;
 var windowheight = document.documentelement.clientheight;
 var popupheight = $("#popupcontact").height();
 var popupwidth = $("#popupcontact").width();
 //centering
 $("#popupcontact").css({
  "position": "absolute",
  "top": windowheight/2-popupheight/2,
  "left": windowwidth/2-popupwidth/2
 });
 //only need force for ie6
 
 $("#backgroundpopup").css({
  "height": windowheight
 });
 
}

 

//controlling events in jquery
$(document).ready(function(){
 //弹出层
 popupmodal.show=function(e)
 {
 centerpopup();
  //load popup
  loadpopup();
 }
 //是否显示标题
  if(popupmodal.isusetitle){
 $("#idmodaltitle").html(popupmodal.idmodaltitle);
 //alert($("#idmodaltitle").attr("align"));
 $("#idmodaltitle").attr("align",popupmodal.align);
 //alert(popupmodal.align);alert($("#idmodaltitle").attr("align"));
 }
 else{
  $("#idmodaltitle").hide();
 }
 //设置窗口大小
 document.getelementbyid("popupcontact").style.width=popupmodal.modalwidth;
 document.getelementbyid("popupcontact").style.height=popupmodal.modalheight;
 $("#idcontentarea").html(document.getelementbyid(popupmodal.idloadhtml).innerhtml);
 //loading popup
 //click the button event!
 $("#button").click(function(){
  //centering with css
  centerpopup();
  //load popup
  loadpopup();
 });
    
 //closing popup
 //click the x event!

 for(var i=0;i {
     $("#" idcloses[i]).click(function(){
    disablepopup();
   });
 }

 //click out event!
 $("#backgroundpopup").click(function(){
  disablepopup();
 });
 //press escape event!
 $(document).keypress(function(e){
  if(e.keycode==27 && popupstatus==1){
   disablepopup();
  }
 });

});

 

genneral.css

 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
font-family:tahoma,arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundpopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupcontact{

}
#popupcontact h1{

color:#6fa5fd;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #d3d3d3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupcontactclose{
font-size:14px;
line-height:14px;
right:6px;
top:6px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}

 

测试页面

 

http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml" dir="ltr">