首页>组件>右侧悬浮工具

右侧悬浮工具

文章转载,请注明出处 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="返回顶部">&#xe684;</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()">&#xe70c;</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();">&#xe6a6;</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;
}