• 热门关键字:
    jquery > jquery插件 > js特效 > 网友NULL分享原创响应式模态窗口js特效

    网友NULL分享原创响应式模态窗口js特效

    31780
    所属分类:js特效
    发布时间:2015/9/29 15:39:45
    下载量:1616
    评论数:0
    转载请自觉注明原?#27169;?a href="http://www.7735958.com/Detail.aspx?id=503" title="网友NULL分享原创响应式模态窗口js特效" target="_blank">http://www.7735958.com/Detail.aspx?id=503

    非常感谢网友NULL的无私分享,此原创响应式模态窗口js特效是他今天刚写好的一款原创作品,第一时间与大家分享,主要是用原生javascript实现?#27169;?#37197;合css3实现响应弹出层效果,非常实用,大家好好利用哦。。。


    核心代码如下:

    var ModalEffects = (function() {
    
    	function init() {
    
    		var overlay = document.querySelector( '.md-overlay' );
    
    		[].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {
    
    			var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
    				close = modal.querySelector( '.md-close' );
    
    			function removeModal( hasPerspective ) {
    				classie.remove( modal, 'md-show' );
    
    				if( hasPerspective ) {
    					classie.remove( document.documentElement, 'md-perspective' );
    				}
    			}
    
    			function removeModalHandler() {
    				removeModal( classie.has( el, 'md-setperspective' ) ); 
    			}
    
    			el.addEventListener( 'click', function( ev ) {
    				classie.add( modal, 'md-show' );
    				overlay.removeEventListener( 'click', removeModalHandler );
    				overlay.addEventListener( 'click', removeModalHandler );
    
    				if( classie.has( el, 'md-setperspective' ) ) {
    					setTimeout( function() {
    						classie.add( document.documentElement, 'md-perspective' );
    					}, 25 );
    				}
    			});
    
    			close.addEventListener( 'click', function( ev ) {
    				ev.stopPropagation();
    				removeModalHandler();
    			});
    		} );
    	}
    	init();
    })();

    效果如下:

    网友NULL分享原创响应式模态窗口js特效





    如果您觉得本作品对您的学习有所帮助:支付鼓励



    关键字:网友NULL 弹出层 层特效 响应式 响应式布局
    • 网友NULL分享原创响应式模态窗口js特效如果你喜欢学院的资源就下载吧,亲,谢谢!
    • 网友NULL分享原创响应式模态窗口js特效
    • 网友NULL分享原创响应式模态窗口js特效
    • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

    声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐[email protected],一旦发现造成侵权行为,后果自负。。

    友荐云推荐
    安徽快3三同号遗漏