@-webkit-keyframes opacity { 0% { opacity: 0; /*初始状态 透明度为0*/ } 50% { opacity: 0; /*中间状态 透明度为0*/ } 100% { opacity: 1; /*结尾状态 透明度为1*/ } } .li-opacity { -webkit-animation-name: opacity; /*动画名称*/ -webkit-animation-iteration-count: 1; /*动画次数*/ -webkit-animation-delay: 0s; /*延迟时间*/ } .alert-mask { position: fixed; height: 100%; width: 100%; left: 0%; top: 0%; z-index: 9998; background-color: rgba(0,0,0,.7); } .alert-content { position: fixed; box-sizing: border-box; border-radius: 4px; z-index: 9999; -webkit-transition: .4s; -moz-transition: .4s; transition: .4s; display: none; } .alert-show { display: block; } .alert-default { background-color: white; }
html
<p data-flag="fadeIn">fadeIn</p> <p data-flag="sideLeft">sideLeft</p> <p data-flag="scale">scale</p> <p data-flag="info">info</p>
js
require.config({ jquery:'component/jquery/jquery-3.1.0.min', liAlert: 'li/li-alert',//常用弹框组件 }) require(['jquery'],function($){ require(['liAlert'],function(){ $('.alert').on('click',function(event){ $.alert({ content: '<h1>我是弹框</h1>', effect: $(event.currentTarget).attr('data-flag'), blankclose: true, //autoClose: true }) }) }) })
效果图
完整的代码已上传github： https://github.com/helijun/component/tree/master/alert