效果地址：
首先 脚本创建需要弹出的窗体
function create_float_window() {
var float_window_html = '';
float_window_html += '<div id="float_window">' +
'<input id = "clear" type="button"/>' +
'<input id = "cancel" οnclick="clear_float_window()" type="button"/>' +
'<input id = "save" οnclick="clear_float_window()" type="button"/>' +
'</div>';
var float_window = document.createElement('div');
float_window.innerHTML = float_window_html;
document.body.appendChild(float_window);
}
然后：给三个小块添加样式：
input{
background: none repeat scroll 0 0 #DDDDDD;
border:1px solid #FFFFFF;
border-radius:4px;
height:25px;
width:25px
}
主要是 背景色和大小
然后：再给三个小框添加点击的样式（鼠标经过）
input:hover{
border-color:#AAAAAA;
cursor:pointer;
}
然后：添加整个窗体的浮动效果
#float_window{
display: inline;
backgroud-color:#CCCCCC;
border:1px solid #888888; /*加框*/
border-radius:5px; /*圆角*/
bottom:40px; /*底部边距*/
padding:5px;
position: fixed; /*位置绑定*/
right: 50px;
z-index: 10;
}
最后添加浮动小框的清除操作
function clear_float_window() {
$("#float_window").fadeOut("slow");
$("#float_window").remove();
}
最后一张实现的效果图，
转载于:https://my.oschina.net/NV9rBbk/blog/196490