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
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
【Qt】仿QQ表情选择控件
表情选择控件在聊天应用中经常要用到,做起来虽然不复杂但是很繁琐,特别是有些图标需要按顺序排列。每次重做必然是很费时,所以我将聊天表情选择控件封装成一个独立的类QFaceSelectWidget,方便直接应用到自己的项目中。 先来看看效果图: 测试程序是一个对话框,里面放有一个QPushButton和一个QLabel,水平布局。点击按钮弹出“表情选择框",选择表情后"表情
豆瓣电台api
使用工具是HttpWatch(官网有免费版本的下载). 下面这个URL中的from后的参数是浏览器的版本,我使用的是ie9. 1.参数 type: [benpsur], RPC函数指示: b: bye(?), 播放以删除终止. 长报告 e: end, 返回:'"OK"', 报告歌曲播放完毕, 短报告 n: new, 返回新播放列表, 无其余必备参数(uid
【Python】豆瓣FM API分析
原文地址 豆瓣FM非官方API分析 原理 豆瓣并没有开放 douban.fm 的API 以下的分析只是通过抓包,并结合网上前人的研究,猜测参数的作用 通过python的requests模块来测试 根据Arguments构造传入参数结构体,发送http请求 获取到的是json数据,用json.loads()转成字典进行操作 登录接口使用 douban.fm 并不需要使用豆瓣的 OAuth 认证,只需要
ios端豆瓣电台 DoubanFM
完全自己搭的的ios端豆瓣电台。基本上实现了官方客户端的大部分内容把,界面也比较美观,简易使用iphone6的界面看。实现了包括选择各种频道,红心频道,载入专辑图片,歌曲,跳过歌曲,重新载入播放列表,歌曲加心,歌曲放入垃圾桶等等功能。
豆瓣FM电台Chrome扩展——单曲循环
在前面的一篇博客《豆瓣FM电台Chrome扩展——下载》中, 介绍了添加一个下载当前音频的扩展功能。 有网友指出,是否可以考虑添加单曲循环的功能? 我觉得这个功能很不错,之前如果遇到一首非常喜欢的歌曲,只能听一遍,感觉确实不太过瘾。 于是晚上开始动手完成了一下,添加一个“循环”的链接, 点击它可以保持当前的音乐单曲循环,想听过久听多久。要是听够了,点击“随机”,就恢复随机播放。效果图如下:
Ubuntu下如何收听豆瓣电台
在Ubuntu下有两种方法收听豆瓣电台: 1.由于系统swf播放软件冲突造成的,解决方法如下: swf文件没有被adobe flash来打开,虽然安装了,但是默认还是用其他程序打开的,这是安装firefix时候默认的一个程序。 具体解决方法如下: 打开新立得软件管理,直接搜索swf,出来一大堆,看看你都安装了什么和swf有关的软件包,删掉就好了,我的是gnash,凡是以它开头的软件包全都给
iOS - AVPlayer网络音频播放器(利用豆瓣FM开放接口) 第二版
由于自己爱听音乐,一直想自己写一个音乐播放器,网上搜索发现豆瓣FM的数据源接口开放,索性就自己做了个豆瓣FM的播放器。 github路径:https://github.com/icefishlily/audioPlayer_2 其中不包含红心和登录(料想豆瓣的登录接口可能会频繁改动) 其中用到了诸多第三方软件,都是通过cocoapods导入的 其中还用到了网上找到的一个类CDSideBar
锁屏状态下弹出对话款,类似QQ、微信锁屏时候屏幕小窗口显示消息
原:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=540944&extra=page%3D1&page=1 不多说,上个简图, 首先创建一个广播接收消息, 这里面有判断是否锁屏, BroadcastReceiver broadcastReceiver = new BroadcastRecei
iOS仿喜马拉雅FM做的毕业设计及总结(含新手福利源码)
iOS仿喜马拉雅FM做的毕业设计及总结(含新手福利源码)
模仿QQ微信列表左滑删除功能
模仿QQ微信,在列表item左滑删除功能。本demo简单实现了在列表左滑出现删除按钮,点击按钮可删除该item,点击其他地方按钮就隐藏并且实现了惯性滑动。完美解决了滑动冲突和点击冲突。