jquery 好看的弹出层，过一会自动消失，有滚动条也能垂直居中（thymeleaf）（ 代码库）

<style type="text/css">
   .dream_area {
      background: rgba(0,0,0,.7);
      text-align: center;
      line-height: 2rem;
      color: #fff;
      position: fixed;
      left: 50%;
      top: 50%;
      -webkit-border-radius: 2px;
      z-index: 9999;
      display: none;
      padding: 15px 17px;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      font-size: 1.1rem;
      font-family: Helvetica,sans-serif;
      width: 60%;
   }
</style>



<span class="dream_area" id="bookDream" th:text="${dream}">



<script th:inline="javascript">
 function shubingDelTime() {
  $("#bookDream").fadeOut(200);
 }

 /*<![CDATA[*/
 var dream = /*[[${dream}]]*/"";
 /*]]>*/
 if (dream !== "") {
  var bookDreamSpan = $("#bookDream");
  bookDreamSpan.text(dream);
  bookDreamSpan.fadeIn(200);
  setTimeout("shubingDelTime()", 3000);
 }
</script>

 

原创文章，欢迎转载，转载请注明出处！