2 myhirra myhirra 于 2013.09.05 10:33 提问

请教 一下 像豆瓣FM那样的 注册框是怎么实现的呀

点一下注册按钮, 然后除了注册框,其他的都变成背景了(颜色变灰, 不能点击)

3个回答

flyed2008
flyed2008   2013.09.05 13:15
已采纳

<!DOCTYPE HTML>



jquery dialog
<br>
<br>
<br> $(function(){<br> $(&#39;#dialog&#39;).dialog({<br> height:140,<br> modal:true<br> });<br> });<br>







我这个是用jquery ui做的,效果和那个差不多,你可以参考下,其中有引用到的js及css文件,请到jquery ui网站下载
t619104019
t619104019   2015.03.30 14:30

这种东西还是自己写好一些 他的实现也其实就是一个黑色透明的div罩子罩在上面而已 我这儿有自己写的实例

t619104019
t619104019   2015.03.30 14:34
 function dialogConfirm(title,str){
        var clientHeight=document.documentElement.clientHeight;
        var clientWidth=document.documentElement.clientWidth;
        if(title==str&&title=='false'){
            $("#shelterDiv").remove();
            $("#centerConfirm").animate({
                    "height":"0px","width":"0px","padding":"10px",
                    "margin-top":clientHeight/2-50,
                    "margin-left":clientWidth/2+50
                },100).animate({
                    "height":"0px","width":"0px","padding":"0px",
                    "margin-top":clientHeight/2-70,
                    "margin-left":clientWidth/2
                },200,function(){$(this).remove();});
            return false;
        }else if(title==str&&title=='true'){
            $("#shelterDiv").remove();
            $("#centerConfirm").animate({
                    "height":"0px","width":"0px","padding":"10px",
                    "margin-top":clientHeight/2-50,
                    "margin-left":clientWidth/2-70
                },100).animate({
                    "height":"0px","width":"0px","padding":"0px",
                    "margin-top":clientHeight/2-70,
                    "margin-left":clientWidth/2
                },200,function(){$(this).remove();});
            return false;
        }
        $("body").prepend("<div id='shelterDiv'>");
        $('#shelterDiv').css({
                "position": "absolute","background-color": "#000000",
                "height": clientHeight,"opacity": "0.3",
                "width":clientWidth,"z-index": "999"
             });
        $("body").prepend(
                "<div id='centerConfirm'>"+
                    "<a onclick='dialogConfirm(\"false\",\"false\");'"+
                        "style='width:15px;height:15px;position:absolute;overflow:hidden;"+
                        "right:23px;top:21px;z-index:999;"+
                        "background:transparent url(../../jsLibrary/images/icon.png) no-repeat -60px -20px'></a>"+
                    "<div style='font-size:14px;color:#3c3c3c;font-weight:700;margin-bottom:20px;'>"+title+"</div>"+
                    "<div>"+str+"</div>"+
                    "<div style='margin-top:20px;'>"+
                        "<a onclick='dialogConfirm(\"true\",\"true\");' style='border:1px solid #52a0e5;width:58px;height:28px;"+
                            "line-height:28px;text-align:center;"+
                            "-webkit-border-radius:1px;-moz-border-radius:1px;"+
                            "-ms-border-radius:1px;"+"border-radius:1px;background:#52a0e5;color:#fff;"+    
                            "display:inline-block;margin-right:10px;font-weight:700'>确 定</a>"+
                        "<a onclick='dialogConfirm(\"false\",\"false\");' style='background:#fff;border-color:#d9d9d9;color:#3c3c3c;"+
                            "border:1px solid #52a0e5;width:58px;height:28px;line-height:28px;"+
                            "text-align:center;-webkit-border-radius:1px;-moz-border-radius:1px;"+
                            "-ms-border-radius:1px;border-radius:1px;background:#52a0e5;"+
                            "color:#fff;display:inline-block;margin-right:10px;font-weight:700'>关 闭</a>"+
                    "</div>"+
                "</div></div>");
        $('#centerConfirm').css({
                "position":"absolute","background-color": "white",
                "height":"0px","width":"0px","overflow":"hidden",
                "padding":"20px 20px 20px 30px",
                "margin-top":clientHeight/2,
                "margin-left":clientWidth/2,
                "z-index": "1000","border":"4px solid rgba(0,0,0,0.2)","background-clip":"padding-box"
                            }).animate({
                                "height":"129px","width":"330px",
                                "margin-top":clientHeight/2-129/2,
                                "margin-left":clientWidth/2-330/2
                                },150).animate({
                                        "height":"109px","width":"310px",
                                        "margin-top":clientHeight/2-109/2,
                                        "margin-left":clientWidth/2-310/2},200);
    }
```title是标题   str是询问内容

Csdn user default icon
上传中...
上传图片
插入图片