右侧悬浮工具
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
HTML
SCSS
CSS
<a href="javascript:void(0)" class="hui-tools-right hui-totop hui-iconfont" title="返回顶部" alt="返回顶部"></a>
.hui-tools-right {
position: fixed;
right: 15px;
z-index: 999;
cursor: pointer;
visibility: visible;
background-color: #fff;
border: 1px solid #d9d9d9;
color: #9c9c9c;
font-size: 16px;
width: 38px;
height: 38px;
line-height: 38px;
text-align: center;
text-decoration: none;
_position: absolute;
&:hover {
color: #fff;
text-decoration: none;
background-color: #999;
border-color: #999;
}
.hui-totop {
bottom: 60px;
display: none;
}
.hui-feedback {
bottom: 110px;
}
}
.hui-tools-right {
position: fixed;
right: 15px;
z-index: 999;
cursor: pointer;
visibility: visible;
background-color: #fff;
border: 1px solid #d9d9d9;
color: #9c9c9c;
font-size: 16px;
width: 38px;
height: 38px;
line-height: 38px;
text-align: center;
text-decoration: none;
_position: absolute;
/*4.12.1 返回顶部
name: hui-totop
Level: Global
example: <a href="javascript:void(0)" class="hui-tools-right hui-totop" title=backToTopTxt alt=backToTopTxt></a>
explain: 返回顶部
*/
/*4.12.2 意见反馈
name: hui-feedback
Level: Global
example: <a href="javascript:;" class="hui-tools-right hui-feedback hui-iconfont" title="意见反馈" onClick="feedback()"></a>
explain: 意见反馈
<div id="hui-modal-feedback" class="hui-modal hide fade">
<div class="hui-modal-header">
<h3>意见反馈</h3>
<a class="hui-iconfont hui-modal-close" data-dismiss="modal" aria-hidden="true" href="javascript:void();"></a>
</div>
<div class="hui-modal-body">
<div>
<label class="mr-20"><input type="radio" class="radio" value="1" name="radio-feedback" id="feedback-1"> 业务咨询</label>
<label class="mr-20"><input type="radio" class="radio" value="2" name="radio-feedback" id="feedback-2"> 体验反馈</label>
<label class="mr-20"><input type="radio" class="radio" value="3" name="radio-feedback" id="feedback-3"> 好点子</label>
</div>
<div class="hui-form-item-control mt-20">
<textarea class="hui-textarea valid" onKeyUp="$.Huitextarealength(this,500)" placeholder="吐槽点什么...最少输入10个字符"></textarea>
<p class="hui-textarea-numberbar"><em class="hui-textarea-length">0</em>/500</p>
</div>
</div>
<div class="hui-modal-footer">
<button class="hui-btn hui-btn-primary radius">确定</button>
<button class="hui-btn hui-btn-default radius ml-10" data-dismiss="modal" aria-hidden="true">取消</button>
</div>
</div>
*/
}
.hui-tools-right:hover {
color: #fff;
text-decoration: none;
background-color: #999;
border-color: #999;
}
.hui-tools-right .hui-totop {
bottom: 60px;
display: none;
}
.hui-tools-right .hui-feedback {
bottom: 110px;
}