wcx/wolegca.github.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add mask effect of message

Browse Source
This commit is contained in:
wolegca 2019-09-13 13:04:03 +08:00
parent 9101ae4607
commit cd1ee4101a
3 changed files with 16 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
base.js
View File

@ -20,9 +20,12 @@ $(function () {
}); });
$(document.body).on('click','.msg-footer span',function(){ $(document.body).on('click','.msg-footer span',function(){
var p = $(this).parent().parent(); var p = $(this).parent().parent();
var m = $('.mask');
p.css('animation','fadeOut .5s'); p.css('animation','fadeOut .5s');
m.css('animation','fadeOut .5s');
setTimeout(function(){ setTimeout(function(){
p.remove(); p.remove();
m.hide();
},500); },500);
}); });
})(); })();
@ -43,6 +46,7 @@ var message = new function () {
'</div>' + '</div>' +
'</div>' '</div>'
$(document.body).append(html); $(document.body).append(html);
$('.mask').show().css('animation','fadeIn .5s');
$('#mh-'+id).Drag($('#mc-'+id)); $('#mh-'+id).Drag($('#mc-'+id));
return id; return id;
} }

2
index.html
View File

@ -54,6 +54,8 @@
</div> </div>
</div> </div>
<div class="mask"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="drag.js"></script> <script src="drag.js"></script>
<script src="base.js"></script> <script src="base.js"></script>

10
myui.css
View File

@ -83,6 +83,16 @@
color: rgb(50, 50, 50) color: rgb(50, 50, 50)
} }
.mask{
position: absolute;
display: none;
width:100%;
height:100%;
background-color:rgba(56, 56, 56, 0.747);
z-index:998;
animation-fill-mode: backwards
}
@keyframes fadeIn { @keyframes fadeIn {
from { from {
opacity: 0 opacity: 0