弹出层（封装代码）

弹出层：常用分辨率：1368*766  1440*900  1920*1080

position:fixed（固定不动在页面）,

absolute（随浏览器滚动一起走）,relative(随内容往下排挤),static(默认值)

弹出层 弹出，loading,都是一个Div

 1. 都离不开定位position:absolute fixed relative static（默认值，无意义）

 2. 无非就是改变他的坐标:left 和top（不能单独使用）

 3. 如果要有层级关系，那么就使用z_index（top,left,z-index要结合定位使用）

 4. 使用fixed定位时，高度不要超过520.

 5. 遮罩层

封装代码使用

< a href = "javascript:void(0);" id = "dialog" > 弹出 </ a >

< script type = "text/javascript" >
$( "#dialog" ).click( function (){
hd_dialoag({title: "提示" ,sureText: "删除" ,content: "您确定删除吗?" ,callback: function (ok){
if (ok){
alert( "确定删除" );
} else {
alert( "取消删除" );
}
}});
});

</ script >

hd_dialog_1.0.js

function hd_dialoag(options){
//json格式
var defaults = {
title: "提示" ,
content: "请输入内容 ！" ,
width:460,
height:220,
sureText: "确定" ,
cancleText: "取消" ,
//默认为展示
showButton: true ,
//事件回调
callback: function (){}    
};  

var opts = $.extend({ },defaults,options);
$( "body" ).append( "<div class='b_l w460' id='dialogbox'>" +
" <div class='bcom_ti'>" +
" <a href='javascript:void(0);' class='bide layer_icon close fr'></a> <span>" +opts.title+ "</span>" +
" </div>" +
" <div class='bcom_cent'>" +
" <p class='bcomti'>" +opts.content+ "</p>" +
" <p class='bcoma'>" +
" <a href='javascript:void(0);' class='bc_abut1 sure'>" +opts.sureText+ "</a>" +
" <a href='javascript:void(0);' class='bc_abut2 close'>" +opts.cancleText+ "</a>" +
" </p>" +
" </div>" +  //添加一个遮罩层
"</div>" ).append( "<div class='tmui-overlay' style='height:" +$(window).height()+ "px'></div>" );
var $dialog = $( "#dialogbox" );

if (!opts.showButton)$dialog.find( ".bcoma" ).remove();

$dialog.width(opts.width);
$dialog.height(opts.height);
hd_center_dialog($dialog);

//关闭按钮绑定点击事件
$dialog.find( ".close" ).click( function (){
$dialog.next().remove(); //删除遮罩层
$dialog.slideUp( "slow" , function (){
$( this ).remove();
});
if (opts.callback)opts.callback( false );
});
//确定按钮绑定点击事件
$dialog.find( ".sure" ).click( function (){
$dialog.next().remove(); //删除遮罩层
$dialog.slideUp( "slow" , function (){
$( this ).remove();
});
//事件回调
if (opts.callback)opts.callback( true );
});

//窗口resize（自适应浏览器滚动）
$(window).resize( function (){
hd_center_dialog($dialog);
});
};

//层居中
function hd_center_dialog($dialog){
var windowWidth = $(window).width();
var windowHeight = getClientHeight();
var dialogWidth = $dialog.width();
var dialogHeight = $dialog.height();
var left = (windowWidth-dialogWidth)/2;
var top =  (windowHeight-dialogHeight)/2;
$dialog.css({left:left,top:top});
};


//获取屏幕框大小
function getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight
: document.documentElement.clientHeight;
} else {
clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight
: document.documentElement.clientHeight;
}
return clientHeight;

};