弹出提示框显示和消失操作

首先写一个装提示信息的盒子，我这里放在大盒子中用层定位美化

 1 <div style="position: relative;">
 2     <div id="alert" style="position: absolute; left: 45%; top: 350px; padding: 10px 10px 10px 10px; display: none; border: 1px solid #3c7aa4; border-radius: 4px;font-size:x-large;font-weight:600; "></div>
 3 </div>

再用js

 1 <style>
 2 .alert-success {
 3 background-color: #3c7aa4;
 4 }
 5 
 6 </style>
 7 <script>
 8 
 9 function myFunction(obj) {
10 
11  $('#alert').html('不能为空').addClass('alert-success').fadeIn().fadeOut();     //先添加显示类容，再添加一个背景色，最后控制显示和消失
12 
13 }
14 
15 </script>

特别讲一下

fadeIn()：使用淡入效果来显示一个隐藏的 元素   详细用法：https://www.w3school.com.cn/jquery/effect_fadein.asp
fadeOut()：使用淡出效果来隐藏一个 元素       详细用法：https://www.w3school.com.cn/cssref/pr_class_display.asp
 
posted @ 2021-02-10 01:22  飞渝  阅读(144)  评论(0)    收藏  举报