让我们一起爱米兰
站内搜搜:
移动设备
请扫描二维码
或访问
m.milan100.com
您所在的位置 -> 米兰百分百 -> jquery -> jQuery遮罩弹窗

jQuery遮罩弹窗

点击数:1673 发表时间:2011-05-11 11:52:05 作者: 来源链接:
分享到:
分享到微信

HTML:

	
		<p id="ok">单击这里显示</p>

JS:

	 
		$(document).ready(function(){
    $("#ok").click(function(){
        showBg();
        addBox();
    });
});
function showBg(){
    var _body = $("body").eq(0);
    $("html,body").css("overflow","hidden");
    if($("#bg").length == 0){
        _body.append("<div id=\"bg\"><iframe src=\"\" width=\"100%\" height=\"100%\" frameBorder=\"0\"></iframe></div>");
        $("#bg").css({"background-color":"#000000","opacity":".5","filter":"alpha(opacity=50);","z-index":"100","position":"absolute","top":"0","width":_body.width(),"height":_body.height()});
        $("#bg iframe").css({"opacity":"0","filter":"alpha(opacity=0);"});
    }else{
        $("#bg").show();
    }
}
function hiddenBg(){
    $("html,body").css("overflow","auto");
    $("#bg").hide();
    $("#dialog").hide();
}
function addBox(){
    var _body = $("body").eq(0);
    if($("#close").length == 0){
        _body.append("<div id=\"dialog\"><span id=\"close\" style=\"float:right;cursor:pointer;border:#333 solid 1px;\">×</span></div>");
        $("#dialog").css({width:500,height:200,position:"absolute","z-index":"101",top:(_body.height() / 2 - 100),left:(_body.width() / 2 - 250),"background-color":"#ffffff"});
        $("#close").click(function(){
            hiddenBg();
        });
    }else{
        $("#dialog").show();
    }
}
2
很 好
2
一 般
2
差 劲
热门新闻
相关文章
上一篇: jquery 获取各种屏幕的宽度和高度
下一篇: jquery 操作iframe
评论区
匿名

返回首页 | 收藏本页 | 回到顶部
Copyright 2010. 米兰百分百 Powered By Bridge.
京ICP备15050557号