弹出层《一》【原创】

如图展示

单击按钮弹出层展示

css代码

.dialog-box{width:400px; position:absolute; position:fixed; display:block; border:1px solid #aaa; display:none}
.dialog-box .title{ height:25px;line-height:25px; background-color:#b1d0e4;}
.dialog-box .title strong{ font-size:13px; color:#04578b; margin-left:10px;}
.dialog-box .topExit{position:absolute; width:14px; height:14px;
 background:url(images/fork.gif) no-repeat;top:4px; right:8px; display:block; overflow:hidden; cursor:pointer;}

JS代码

//触发弹层
var dialog=function(obj){
    //弹出层的对象
     var x=($(window).width()-$(obj).width())/2;
     var y=($(window).height()-$(obj).height())/2;
     $(obj).css({left:x+"px",top:y+"px","display":"block"});
    }
//退出弹出层
var exitDialog=function(obj){
     $(obj).css({"display":"none"});
    }

html代码

<input type="button" value="click" onclick="dialog('.dialog-box')"  />
  <!--弹出层-->
  <div class="dialog-box" style="height:300px;">
    <div class="title"><strong>添加用户</strong><em class="topExit" onclick="exitDialog('.dialog-box')"></em></div>
    <div style=" height:250px;"></div>
    <div style="text-align:right; padding:0 10px;">
       <input type="button"  value="保 存"  />&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button"  value="取 消" onclick="exitDialog('.dialog-box')" />
    </div>
  </div>