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

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

13886
所属分类:js特效
发布时间:2015/9/29 15:39:45
下载量:1269
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=503

非常感谢网友NULL的无私分享,此原创响应式模态窗口js特效是他今天刚写好的一款原创作品,第一时间与大家分享,主要是用原生javascript实现的,配合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特效
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

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

友荐云推荐