需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，输入问题基础代码。
2、在index.html中的<body>标签中，输入js代码：
function fun() {
alert('click success!')
}
3、浏览器运行index.html页面，此时点击按钮弹出了提示框。
直接自己写一个就可以了，很简单的，就是一个显示框，ajax获取推荐的人的昵称，然后这个显示框用css设置display：none一开始是隐藏的，然后js代码如下
if($('.xxx').hasClass('on')){$('.xxx').removeClass('on')
$('.xxx').css({
'display' : 'none',
})
}else{
$('.xxx').addClass('on')
$('.xxx').css({
'display' : 'block',
})
}
这样就可以点击就显示了，在点一下就隐藏
恰好写过。
ng的组件分为两种形式，一种是用directive封装的custom element形式的component，比如Button、Tooltip这种；另外一种则是以Service形式封装成一个单例的object由angular的IoC注入到controller中，比如notification、或者你需要的modal。
首先要为modal服务设计API，比如modal.open modal.close, 然后要为弹出的modal设计遮罩层，并且确定当同时有多个modal出现在页面上时，遮罩层唯一。
其次，出于ng的特殊性，每次open一个新modal时，都需要利用ng内置的$compile服务对modal内的模板进行编译，并且为了支持controllerAs的关键词，这部分连接需要手动在服务中处理(具体怎么处理百度一下吧，很容易)
以下是我当初设计时写的一些参数，或许你可以参照。
API:.open(options) => Modal Object Instance
options ::= {
template: String | dom<class|Id>,
className: String,
scope: AngularScope,
hooks:{
onOpen: Function,
onClose: Function
},
controller:String,
controllerAs:String,
title: String
}
.closeAll
.close(id)
id ::= Number
额外的，这里有一个简单的实现，供你参考https://github.com/btford/angular-modal/blob/master/modal.js
