JQuery实现简单的带遮罩层的弹出框

 最近一直在看JQuery，感觉确实非常的强大，今天试着用JQuery实现了一个非常简单的带遮罩层的弹出框。

JS代码如下：

 

$(document).ready(function(){
    $('#ClientShowBox').click(function(){
        var title="提示";
        var content="这里是内容，这里是显示内容的！";
        var str = CreateDialog(title,content);
        $('#dialogbox').html(str);
        ShowMiddle();
        $('#close').click(function(){
        $('#layer').css("display","none");
        //$('#dialogbox').empty();
        $('#dialogbox').css("display","none");
    });
    });
    $('#ShowBox').click(function(event){
        var title="提示";
        var content="这里是内容，这里是显示内容的！";
        var str = CreateDialog(title,content);
        $('#dialogbox').html(str);
        ShowMiddle();
        $('#close').click(function(){
        $('#layer').css("display","none");
        //$('#dialogbox').empty();
        $('#dialogbox').css("display","none");
    });
        return false;
    });
});

function ShowMiddle(){
    var winWidth = $(window).width();//获取屏幕宽度
    var winHeight = $(window).height();//获取屏幕高度
    $('#layer').width(winWidth);
    $('#layer').height(winHeight);
    $('#layer').css({
        "position":"absolute",
        "background":"#333",
        "filter":"alpha(opacity=30)",
        "opacity":0.3,
        "left":0,
        "top":0,
        "display":"block"
    });
    var popupHeight = $('#dialogbox').height();
    var popupWidth = $('#dialogbox').width();
    $('.box').css({
        "position":"absolute",
        "left":winWidth/2-popupWidth/2,
        "top":winHeight/2-popupHeight/2,
        "background":"#999",
        "display":"block"
    });
}

function CreateDialog(title,content){
    var str = "";
    str += "<div><table style='background:#00ffff'><tr>";
    str += "<td style='width:470px; height:23px; text-align:left; padding-left:5px;'>";
    str += title;
    str += "</td><td style='width:30px; height:23px;'><input id='close' type='button' value='' style='background:url(imgs/MSN.gif); width:30px; height:23px; border:0;' /></td>";
    str += "</tr><tr><td colspan='2' style='padding:10px; text-align:center; vertical-align:middle;height:120px; line-height:120px;'>";
    str += content;
    str += "</td></tr><tr><td colspan='2' style='text-align:right; padding-right:10px;'>";
    str += "<input type='button' value='确定' style='background:url(imgs/botton.png); border:0; width:87px; height:40px;' />&nbsp;&nbsp";
    str += "<input type='button' value='取消' style='background:url(imgs/botton.png); border:0; width:87px; height:40px' /></td></tr></table></div>";
    return str;
}

$(document).ready(function(){
    $('#close').click(function(){
        $('#layer').css("display","none");
        $('#dialogbox').empty();
        $('#dialogbox').css("display","none");
    });
});

 

 

前台页面上需要先引用JQuery库文件及上面的这个JS文件

    <script src="JS/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
    <script src="JS/PopupDialog.js" type="text/javascript"></script>

 

CSS设置如下：

 

.box{width:500px; height:183px; text-align:center; vertical-align:middle;}

 

页面上放的控件如下：

 

<asp:Button ID="ShowBox" runat="server" Text="服务器端按钮" />
    <input id="ClientShowBox" type="button" value="客户端按钮" />
    <div id="layer"></div>
    <div id="dialogbox" class="box"></div>

 

这样点击服务器端按钮或客户端按钮均会触发事件~弹出一个带遮罩层的弹出框。

 

PS：样式实在是太简陋太丑了~不要笑我啊~呵呵