请推荐一款适合button的jquery弹出页面

以下新增按钮代码，我就是想用弹出jquery效果的新增页面 <input type="button" class="btn" id="add_btn" value="新 增"  />我在网上找了很多，都没有介绍用button弹出的jquery效果页面，请哪位大大推荐一款适合button的jquery弹出页面

解决方案 »

  1.   

    functionsub大大，我也知道啊，基础太差
      

  2.   

    button只不过是触发一个事件，具体弹出页面的代码还是要写在button的事件处理函数里面。
      

  3.   

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>遮罩弹窗</title>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script>
    function showBg(ct,content){
    var bH=$(document).height();
    var bW=$("body").width();
    var objWH=getObjWh(ct);
    $("#fullbg").css({width:bW,height:bH,display:"block"});
    var tbT=objWH.split("|")[0]+"px";
    var tbL=objWH.split("|")[1]+"px";
    $("#"+ct).css({top:tbT,left:tbL,display:"block"});
    $("#"+content).html("<div style='text-align:center'>DIV弹窗...</div>");
    $(window).scroll(function(){resetBg()});
    $(window).resize(function(){resetBg()});
    }
    function getObjWh(obj){
    var st=document.documentElement.scrollTop;//滚动条距顶部的距离
    var sl=document.documentElement.scrollLeft;//滚动条距左边的距离
    var ch=document.documentElement.clientHeight;//屏幕的高度
    var cw=document.documentElement.clientWidth;//屏幕的宽度
    var objH=$("#"+obj).height();//浮动对象的高度
    var objW=$("#"+obj).width();//浮动对象的宽度
    var objT=Number(st)+(Number(ch)-Number(objH))/2;
    var objL=Number(sl)+(Number(cw)-Number(objW))/2;
    return objT+"|"+objL;
    }
    function resetBg(){
    var fullbg=$("#fullbg").css("display");
    if(fullbg=="block"){
    var bH2=$(document).height();
    var bW2=$("body").width();
    $("#fullbg").css({width:bW2,height:bH2});
    var objV=getObjWh("dialog");
    var tbT=objV.split("|")[0]+"px";
    var tbL=objV.split("|")[1]+"px";
    $("#dialog").css({top:tbT,left:tbL});
    }
    }
    //关闭灰色JS遮罩层和操作窗口

    function closeBg(){
    $("#fullbg").css("display","none");
    $("#dialog").css("display","none");
    }
    </script>
    <style>
    *{
    font-size:12px;
    }
     #fullbg
    {
    background-color: Gray;
    display: none;
    z-index: 3;
    position: absolute;
    left: 0px;
    top: 0px;
    filter: Alpha(Opacity=30);
    -moz-opacity: 0.4;
    opacity: 0.4;
    }
    #dialog
    {
    position: absolute;
    width: 200px;
    height: 200px;
    background: #F00;
    display: none;
    z-index: 5;
    }
    #main
    {
    height: 1500px;
    }

    </style>
    </head>
    <body>
    <div id="main">
    <a href="#this" onclick="showBg('dialog','dialog_content');">点击这里出现JS遮罩层</a>
    </div>
    <!--JS遮罩层-->
    <div id="fullbg"></div>
    <!--JS遮罩层结束-->
    <!--对话框-->
    <div id="dialog">
    <div id="dialog_content"></div>
    <div style="text-align:center;"><a href="#" onclick="closeBg();">关闭</a></div>
    </div>
    <!--JS遮罩层上方的对话框-->

    </body>
    </html>原来写过的，根据网上的代码做参考的。不知道是不是楼主想要的样式