你的位置:首页 > Java教程

[Java教程]轻量级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