码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-02-09 10:53:42      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:

弹窗支持两种模式,一种是普通信息提示框,调用方法: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)); } };

 

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

标签:

原文地址:http://www.cnblogs.com/paulhe/p/4280930.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!