页面开始引入css样式和jquery库：

<link type="text/css" rel="stylesheet" href="css/mocean.css">
<script type="text/javascript" src="js/jquery.min.js"></script>

body部分设置列表内容和滑动切入的弹窗内容，剩下的就交给javascript吧：

<div class="btn-group">
 <button class="mocean-modal-button" data-mocean-type="slide-in-top">顶部滑入</button>
 <button class="mocean-modal-button" data-mocean-type="slide-in-right">右侧滑入</button>
 <button class="mocean-modal-button" data-mocean-type="slide-in-bottom">底部滑入</button>
 <button class="mocean-modal-button" data-mocean-type="slide-in-left">左侧滑入</button>
 <button class="mocean-modal-button" data-mocean-type="slide-in-top" data-mocean-out-type="slide-out-bottom">从顶到底</button>
 <button class="mocean-modal-button" data-mocean-type="slide-in-bottom" data-mocean-out-type="slide-out-top">从底到顶</button>
 <button class="mocean-modal-button" data-mocean-type="slide-in-left" data-mocean-out-type="slide-out-right">从左到右</button>
 <button class="mocean-modal-button" data-mocean-type="slide-in-right" data-mocean-out-type="slide-out-left">从右到左</button>
</div>

<div class="mocean-wrap mocean-modal-wrap" id="mocean-modal-wrap">
 <div class="mocean-content mocean-modal" id="mocean-modal">
  <h3>Mocean 滑动模态</h3>
  <div class="mocean-modal-content">
    <p>鼠标悬停有放到的效果，鼠标点击每一个按钮，会有8种不同的滑入效果，分别从多个不同的位置。</p>
    <button class="mocean-modal-close">关闭</button>
  </div>
 </div>
</div>

最后的javascript用来调用Mocean模块，并设置好触发显示和隐藏相应元素，部分代码如下：

Mocean = function() {
  this.init();
};

// Current version.
Mocean.version = '0.0.1';

// Initialization method
Mocean.prototype.init = function() {
  this.buttonPressedEvent = buttonPressedEvent;

  //event trigger after animation/transition end.
  this.transitionEndEventName = Modernizr ? transitionEndEventNames[Modernizr.prefixed('transition')] : getTransitionEndEventNames();
  this.animationEndEventName  = Modernizr ? animationEndEventNames[Modernizr.prefixed('animation')] : getAnimationEndEventNames();
  this.transitionAnimationEndEvent = this.animationEndEventName + ' ' + this.transitionEndEventName;
};

Mocean.prototype.getViewportHeight = function() {

  var docElement = document.documentElement,
      client     = docElement['clientHeight'],
      inner      = window['innerHeight'];

  if( client < inner )
    return inner;
  else
    return client;
};