jQuery弹框

html

<button class="btn">点击 出现弹框</button>

<div id="popContainer" class="haiwi-modal">

<div class="haiwi-modal-title">

#* 弹出框标题*#

</div>

<div class="haiwi-modal-body">

#*弹出框内容*#

</div>

<div class="haiwi-modal-bottom">

#*底部按钮*#

<button class="btn-h28 btn-blue mr20" onclick="save();"><strong>保存</strong></button>

<button class="btn-h28 btn-white" onclick="closeAddDialog();">取 消</button>

</div>

<a href="javascript:void(0);" class="close-haiwi-modal">×</a>

</div>

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=$('<div class="haiwi-modal-overlay" id="haiwi-modal-overlay_'+div_id+'" style="z-index:'+zIndex+'"></div>');

$("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"});

}

});

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前端 jQuery弹框阻止冒泡
    !DOCTYPE html> 定时器弹框 .pop_con{display: none;/默认不显示，用定...
    我的好昵称阅读 347评论 0赞 1
  • Web端---常用的特效
    1. tab列表折叠效果 html: 能源系统事业部 岗位名称： 工作地点 岗位名...
    lilyping阅读 1,931评论 0赞 1
  • 迅雷页面
    不会用代码框，所以看着有些乱套，，，，html部分 <!DOCTYPE html> 迅雷看看 ...
    这就是个帅气的名字阅读 1,586评论 0赞 0
  • Django安装
    本书介绍 你是不是对Django的学习感到迷茫？是不是对网上零星的教程感到绝望？是不是苦于没有可以迅速上手的实例而...
    阡陌3536阅读 1,344评论 0赞 0
  • 各种纯css图标
    各种纯css图标 CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比...
    剑残阅读 9,746评论 0赞 8