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

今天给大家分享一款轻量级Modal模态框插件cta.js。这是一款无需使用jQuery插件，纯js编写的模态框弹出特效。效果图如下：

在线预览   源码下载

实现的代码。

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

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

js代码：

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

via：http://www.w2bc.com/Article/36596