html
js
$(function(){
$(".btn").click(function(){
//$.openHaiwiModal("popContainer")或
$.openHaiwiModal("popContainer",{closeClickOverlay:true,width:800,height:600});
})
// 点击除按钮和弹框之外任意地方隐藏表情
$("body").click(function (e) {
if (!$(e.target).closest(".btn,#popContainer").length) {
$.closeHaiwiModal("popContainer");
}
});
//$.openHaiwiModal("popContainer",{closeClickOverlay:true,width:800,height:600});
/*$.closeHaiwiModal("popContainer")*/
})
css
.haiwi-modal-overlay{position:fixed;z-index:10000;top:0px;left:0px;height:100%;width:100%;background:#000;display:none;}
.haiwi-modal {position:relative;display:none;background-color:#FFFFFF;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 0 10px rgba(0,0,0,.4);-webkit-box-shadow:0 0 10px rgba(0,0,0,.4);-box-shadow:0 0 10px rgba(0,0,0,.4);border:1px solid #d3d3d3;}
.haiwi-modal .haiwi-modal-title{position:absolute;display:block;font-size:2em;-webkit-margin-start:0px;-webkit-margin-end:0px;font-weight:bold;border-bottom:1px solid #ddd;top:0px;left:30px;right:30px;padding-top:25px;padding-bottom:10px;cursor:pointer;}
.haiwi-modal .haiwi-modal-body{position:absolute;top:60px;left:0px;right:1px;bottom:55px;color:#404040;padding-top:20px;padding-left:30px;padding-right:30px;text-align:left;}
.haiwi-modal .close-haiwi-modal {position:absolute;font-size:22px;line-height:.5;top:12px;right:13px;color:#aaa;text-shadow:0 -1px 1px rbga(0,0,0,.6);font-weight:bold;cursor:pointer;text-decoration:none;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
.haiwi-modal .close-haiwi-modal:hover, .haiwi-modal .close-haiwi-modal:focus{-khtml-opacity:1.0;-moz-opacity:1.0;opacity:1.0;}
.haiwi-modal .haiwi-modal-bottom {position:absolute;text-align:center;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;border-top:1px solid #ddd;padding:10px 0 0;zoom:1;left:30px;right:30px;bottom:15px;}
.btn-h28,.btn-h22,.btn-h38 {display:inline-block;border:1px solid;*zoom:1;font-size:12px;border-radius:5px;vertical-align:middle;cursor:pointer;transition:background .3s;padding-left:12px;padding-right:12px;outline:0}
input.btn-h28,input.btn-h22,input.btn-h38,button.btn-h28,button.btn-h22,button.btn-h38 {box-sizing:content-box;*overflow:visible}
a.btn-h28:hover,a.btn-h22:hover,a.btn-h38:hover {text-decoration:none}
.btn-h28 {height:28px;line-height:28px}
html* input.btn-h28,html* button.btn-h28 {height:30px}
.btn-h22 {height:22px;line-height:22px}
html* input.btn-h22,html* button.btn-h22 {height:24px}
.btn-h38 {font-size:14px;height:38px;line-height:38px}
html* input.btn-h38,html* button.btn-h38 {height:40px}
.btn-blue {background-color:#48a7e7;border-color:#48a7e7;color:#fff}
.btn-blue:hover {background-color:#4196cf}
a.btn-blue:link,a.btn-blue:visited,a.btn-blue:hover {color:#fff}
a.btn-blue:hover {background-color:#4196cf}
.btn-blue:hover {background-color:#4196cf}
.btn-green {background-color:#2bc762;border-color:#2bc762;color:#fff}
.btn-green:hover {background-color:#26ac56}
a.btn-green:link,a.btn-green:visited,a.btn-green:hover {color:#fff}
.btn-white {background-color:#fff;border-color:#c7c7c7;color:#333}
.btn-white:hover {background-color:#eee}
a.btn-white:link,a.btn-white:visited,a.btn-white:hover {color:#333}
.btn-blue-n {background-color:#badef5;border-color:#badef5;color:#d4eaf9;cursor:default}
.btn-disabled {border-color:#c6c6c6;color:#c6c6c6;cursor:default;background-color:#fff}
.ml10 {margin-left:10px}
.ml20 {margin-left:20px}
.mr10 {margin-right:10px}
.mr20 {margin-right:20px}
.popBg{display:none;position:absolute;height:100%;width:100%;top:0;left:0;background:#000000;border:1px solid #cecece;z-index:1;}
jquery
$.extend({
openHaiwiModal:function(div_id,options){
var defaults={
top:100,//距离顶部的高度
overlay:0.5,//遮罩度
closeClickOverlay:false,//点击遮罩层是否自动关闭
isDrag:true,//是否可拖动
width:400,//弹出框宽度
height:300 //弹出框高度
};
$("#haiwi-modal-overlay_"+div_id).remove();
var zIndex =10000+$(".haiwi-modal-overlay").length*2;
var overlay=$('
');$("body").append(overlay);
defaults=$.extend(defaults,options);
return $("#"+div_id).each(function(){
var o=defaults;
var modal_id="#" + div_id;
var modal_title ="#" + div_id +" .haiwi-modal-title";
var modal_body ="#" + div_id +" .haiwi-modal-body";
var modal_bottom ="#" + div_id +" .haiwi-modal-bottom";
var modal_close ="#" + div_id+" .close-haiwi-modal";
if($(modal_id).outerWidth()
$(modal_id).css({"width":o.width});
}
if($(modal_id).outerHeight()
$(modal_id).css({"height":o.height});
}
var modal_width=$(modal_id).outerWidth();
var modal_height=$(modal_id).outerHeight();
$("#haiwi-modal-overlay_"+div_id).css({"display":"block",opacity:0});
$("#haiwi-modal-overlay_"+div_id).fadeTo(200,o.overlay);
$(modal_body).css({"overflow-y":"auto"});
$(modal_id).css({"display":"block","position":"fixed","opacity":0,"z-index":zIndex+1,"left":50+"%","margin-left":-(modal_width/2)+"px","top":o.top+"px"});
$(modal_id).fadeTo(200,1);
if(o.isDrag){
//点击标题头进行拖动对话框
var _move=false;//移动标记
var _x=0,_y=0;
$(modal_title).click(function(){
}).mousedown(function(e){
_move=true;
_x=e.pageX-parseInt($(modal_id).css("left"));
_y=e.pageY-parseInt($(modal_id).css("top"));
});
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
x=x<0 ?0 :x;
var y=e.pageY-_y;
y=y<0 ?0 :y;
y=y>$(window).height()-20 ?$(window).height()-20 :y;
$(modal_id).css({top:y,left:x});//控件新位置
}
}).mouseup(function(){
_move=false;
});
}
if($(modal_id).height() +o.top>$(window).height()){
$(modal_id).css({"top":0});
}
if($(modal_id).height()>$(window).height()){
$(modal_id).css({"height":$(window).height()-20,"top":10});
}
if($(modal_title).length==0){
$(modal_body).css({"top":0});
}
if($(modal_bottom).length==0){
$(modal_body).css({"bottom":0});
}
if(o.closeClickOverlay){
$("#haiwi_overlay").click(function(){
$.closeHaiwiModal(div_id);
});
}
$(modal_close).click(function(){
$.closeHaiwiModal(div_id);
});
});
},
closeHaiwiModal:function(div_id){
$("#haiwi-modal-overlay_"+div_id).remove();
$("#"+div_id).css({"display":"none"});
}
});