标签:
弹窗支持两种模式,一种是普通信息提示框,调用方法: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)); } };
标签:
原文地址:http://www.cnblogs.com/paulhe/p/4280930.html