自己用jquery+css+div写的一个弹窗

浏览数：24 / 时间：2015年06月09日

弹窗支持两种模式，一种是普通信息提示框,调用方法：popup.msgPopup(msg);

另一种是可以加载页面的弹窗，调用方法：popup.pagePopup(url);

效果图：

技术分享

css代码

.bg{background-color: #000;position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.3;filter: alpha(opacity=50);-moz-opacity: 0.5;}
.box{position: fixed;min-width: 400px;min-height: 150px;left: 50%;top: 50%;margin-left: -200px;margin-top: -75px;height: auto;z-index: 10000;background-color: #fff;border: solid 1px #dddddd;}
.box_head{background-color: #f7f7f7;border-bottom: solid 1px #dddddd;height: 30px;padding: 10px;}
.box_warn{float: left;letter-spacing: 2px;font-size: 16px;font-weight: bold;}
.box_close{background: url("/Images/global.png") no-repeat -218px 3px;float: right;width: 19px;height: 19px;cursor: pointer;}
.box_content{min-width: 100px;min-height: 50px;color: #000000;font-size: 16px;padding: 20px;text-align: center;}

jquery代码

var popup = new
function() {
    this.msgPopup = function(content) {
        appendHtml();
        setContent(content)
    };
    this.pagePopup = function(url) {
        appendHtml();
        loadPage(url)
    };
    this.closePopup = function() {
        $(".bg, .box").hide()
    };
    function setContent(content) {
        $(".box_content").html(content)
    }
    function loadPage(url) {
        $(".box_content").load(url)
    }
    function appendHtml() {
        var boxhtml = ‘<div class="bg"></div>‘;
        boxhtml += ‘<div class="box"><div class="box_head"><span class="box_warn">提示</span><span class="box_close"‘
        boxhtml += ‘onclick="$(\‘.bg, .box\‘).hide();$(\‘body\‘).removeClass(\‘body_scroll\‘);"></span></div><div class="box_content"></div></div>‘;
        $("body").append(boxhtml);
        var x = $(".box").width();
        var y = $(".box").height();
        $(".box").css("margin-left", -(x / 2)).css("margin-top", -(y / 2));
    }
};