大佬教程收集整理的这篇文章主要介绍了weUI应用之JS常用信息提示弹层的封装,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
weUI应用,自己用JS封装了几个常用的信息提示的弹层
测试页面的代码在后面有贴出
几个弹层如下图
HTML页面代码:
<span id="showClick" style="display:block; width:100px; height:80px; line-height:80px; text-align:center; margin:50px; BACkground-color:#ddd; cursor:pointer;">测试
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js">
<script type="text/javascript" src="weUI.js">
<script type="text/javascript">
$(function(){
// //提示弹层,取消关闭,确定做相应操作
// dialog('标题1111111','内容1111111',function(){
// alert('你想做的相应操作1111111');
// $('#dialog1').remove();
// });
// $('#showClick').click(function(){
// dialog('标题2222222','内容2222222',function(){
// alert('你想做的相应操作2222222');
// $('#dialog1').remove();
// });
// });
// //提示弹层,确定关闭
// dialog('标题333333','内容333333');
// $('#showClick').click(function(){
// dialog('标题NEW','内容NEW');
// });
// //完成
// toast();
// //自定义
// $('#showClick').click(function(){
// toast('自定义');
// });
// //加载完成后关闭
// loadingToast();
// setTimeout(function(){$('#loadingToast').fadeOut('fast')},1000);
// //加载完成后关闭(自定义文字)
// $('#showClick').click(function(){
// loadingToast('自定义文字');
// setTimeout(function(){$('#loadingToast').fadeOut('fast')},1000);
// });
// //菜单项弹层
// $('#showClick').click(function(){
// //actionSheetMenu({id:'aa',text:'菜单一'},{id:'bb',text:'删除'});
// //actionSheetMenu({id:'aa',text:'删除'},{id:'cc',text:'菜单三'});
// actionSheetMenu({id:'aa','DSFADS',text:'删除'});
// });
// $('body').on('click','#aa',function(){
// alert('菜单一');
// $('#actionsheet_cancel').trigger('click');
// });
// $('body').on('click','#bb',function(){
// $('#actionsheet_cancel').trigger('click');
// dialog('标题','确认删除操作吗?',function(){
// alert('确定删除');
// $('#dialog1').remove();
// });
// });
// $('body').on('click','#cc',function(){
// alert('菜单三');
// });
//吐司提示
textToast('提示信息11111111111');
$('#showClick').click(function(){
textToast('提示信息2222222222222');
});
});
weui.min.css代码:
.textToast{ width:90%; height:32px; line-height:32px; font-size:16px; text-align:center; color:#fff !important; border-radius:5px; BACkground-color:rgba(80,80,1); position:fixed; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); display:none;}
.textToastShow{ display:block; -webkit-animation:textToastShow 1.5s .2s ease-in-out; animation:textToastShow 1.5s .2s ease-in-out;}
@-webkit-keyframes textToastShow{
30%{ opacity:1;}
100%{ opacity:0;}
}
@keyframes textToastShow{
30%{ opacity:1;}
100%{ opacity:0;}
}
weUI.js代码: