html提示模板

<div class="remind">&nbsp;</div>
<div class="corner">&nbsp;</div>
<style>
    .remind{
    box-shadow: rgb(136, 136, 136) 0px 0px 6px;
    right: auto;
    left: 935px;
    top: 423px;
    z-index: 19001;
    position: absolute;
    border: 1px solid #f5f5f5;
    background-color: #000;
    opacity: 0.7;
    color:#fff;
    border-radius:11px;
    display: none;
}
  .remind  li{
      margin: 10px;
  }
.corner {
    width: 0;
    height: 0;
    border-right: 10px solid #fff;
    border-left: 10px solid #fff;
    border-top: 10px solid #000;
    opacity: 0.7;
    position: absolute;
    z-index: 19001;
    left: 935px;
    top: 423px;
    display: none;
}
</style>
<script type="text/javascript">// <![CDATA[
function remindClose(){
     $(".remind").css("display","none");
     $(".corner").css("display","none");
}
function clearRemind(){
    $(".remind").html("<ul>");
}
function addRemind(content){
    var  liHtml = '<li>'+content+'</li>';
    $(".remind").append(liHtml);
}
function remindShow(){
    $(".remind").append("</ul>");
    $(".remind").css("display","block");
    $(".corner").css("display","block");
}
/*
    @param e 传事件参数，可以获取鼠标坐标 e.pageX/e.pageY
    @parma _this  传对象参数，可以获取对象所在坐标点位
*/
function addFirstRemind(e,_this){
    clearRemind();
    addRemind("1、撒多好记SD卡华盛顿卡");
    addRemind("2、撒多好记SD卡华盛顿卡");
    addRemind("3、撒多好记SD卡华盛顿卡");
    addRemind("4、撒多好记SD卡华盛顿卡");
    addRemind("5、撒多好记SD卡华盛顿卡");
    //获取模板宽度，高度
    var h = $(".remind").height();
    var w = $(".remind").width();
    //获取元素的坐标点
    var v = $(_this).offset();
    $(".remind").css("left",v.left - w/2);
    $(".remind").css("top",v.top - h - 13);
    $(".corner").css("left",v.left - 10);
    $(".corner").css("top",v.top - 13);
    remindShow();
}
</script>

标签：好记,提示,top,remind,html,css,addRemind,模板,left
来源： https://www.cnblogs.com/zf-crazy/p/14975199.html