jQuery cta.js模态框插件



65 257 86



特效描述:jQuery cta.js 模态框插件,jQuery cta.js模态框插件

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/zzsc.css" />

2. 引入JS

<script src="dist/cta.min.js"></script>

3. HTML代码

<section class="section--white" style="margin-top: 40px;">
	<div class="tile-container">
		<div class="tile" data-cta-target=".js-modal-1"></div>
		<div class="tile" data-cta-target=".js-modal-2"></div>
		<div class="tile" data-cta-target=".js-modal-3"></div>
		<div class="tile" data-cta-target=".js-modal-4"></div>
		<div class="tile" data-cta-target=".js-modal-5" style="width: 16.666%"></div>
		<div class="tile" data-cta-target=".js-modal-3"></div>
		<div class="tile" data-cta-target=".js-modal-5" style="width: 16.666%"></div>
	</div>
</section>
<section class="section--white">
	<p>Opening modals on button clicks</p>
	<div class="btn" data-cta-target=".js-dialog" style="background: #4A90E2">Click for awesomeness</div>
</section>
<section class="section--white">
	<p>Opening sidebars</p>
	<div class="btn" data-cta-target=".js-sidebar">Open the Sidebar</div>
</section>
<section class="section--white">
</section>
<div class="js-modal-1  modal  modal--1">
	<span class="modal-close-btn"></span>
	<h1>Visual Continuity</h1>
	<div class="quote-box">
		<div class="quote-box__bubble">Transitioning between two visual states should be clear, smooth and effortless and not confuse the user. A well-designed transition does the heavy lifting and enables the user to clearly understand where their attention should be focused.</div>
	</div>
</div>
<div class="js-modal-2  modal  modal--2">
	<span class="modal-close-btn"></span>
	<h1>Share it if you like it</h1>
</div>
<div class="js-modal-3  modal  modal--3">
	<span class="modal-close-btn"></span>
	<h1>Customary cat!</h1>
	<img src="img/cat.jpg" width="300" alt="">
	<p>You found me :)</p>
</div>
<div class="js-modal-4  modal  modal--4">
	<span class="modal-close-btn"></span>
	<h1>Hierarchical timing</h1>
	<div class="quote-box">
		<div class="quote-box__bubble">When building a transition, consider the order and timing of the elements' movement. Ensure that motion supports the information hierarchy, conveying what content is most important by creating a path for the eye to follow.</div>
	</div>
</div>
<div class="js-modal-5  modal  modal--5">
	<span class="modal-close-btn"></span>
	<h1>Consistent choreography</h1>
	<div class="quote-box">
		<div class="quote-box__bubble">A well-choreographed app also provides teachable moments. When transitioning elements are coordinated, the user's understanding of the app grows. They "get" the app; they don't feel disoriented by the animation.</div>
	</div>
</div>
<div class="js-dialog  modal  dialog" style="text-align: center;">
	<span class="modal-close-btn"></span>
	<h3>Do you think this is Awesome?</h3>
	<br>
	<a onclick="closeShowingModal(true); return;" class="btn  btn--blue">Yes</a>
	<a onclick="closeShowingModal(false); return;" class="btn  btn--blue">No</a>
</div>
<div class="js-sidebar  modal sidebar">
	<span class="modal-close-btn"></span>
	<div class="sidebar__block" style="height:20%"></div>
	<div class="sidebar__block" style="height:40%"></div>
	<div class="sidebar__block" style="height:10%"></div>
</div>
<script>
var closeFn;
function closeShowingModal(liked) {
	if (liked !== undefined) {
		_gaq.push(['_trackEvent', 'ctajs', liked ? 'liked' : 'unliked']);
	}
	var showingModal = document.querySelector('.modal.show');
	if (!showingModal) return;
	showingModal.classList.remove('show');
	document.body.classList.remove('disable-mouse');
	if (closeFn) {
		closeFn();
		closeFn = null;
	}
}
document.addEventListener('click', function (e) {
	var target = e.target;
	if (target.dataset.ctaTarget) {
		_gaq.push(['_trackEvent', 'ctajs', 'modal']);
		closeFn = cta(target, document.querySelector(target.dataset.ctaTarget), { relativeToWindow: true }, function showModal(modal) {
			modal.classList.add('show');
			document.body.classList.add('disable-mouse');
		});
	}
	else if (target.classList.contains('modal-close-btn')) {
		closeShowingModal();
	}
});
document.addEventListener('keyup', function (e) {
	if (e.which === 27) {
		closeShowingModal();
	}
})
var _gaq = _gaq || [];
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 浮动提示框 叠加浮动层 lightbox

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到