右侧悬浮工具
文章转载,请注明出处 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; }