轻量级Modal模态框插件cta.js

<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">
<script src="http://www.w2bc.com/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>

</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>

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 || [];