Modal-Like Sliding Panel with jQuery and CSS3

A jQuery/HTML5/CSS based sliding panel that slides out a modal-like content panel and pushes the main content to the bottom when toggled.

How to use it:

1. Wrap the main content and the trigger button into a container element with the data-toggle="modal" data-target="targetModal" attributes.

<div class="btn-container" data-toggle="modal" data-target="myModal">
  <h1>Main Title</h1>
  <p>Main content</p>
  <button class="btn" data-toggle="trigger">Triggle button</button>
</div>

2. Insert your content into the sliding panel.

<div class="modal fade" id="targetModal" tabindex="-1" role="dialog" aria-labelledby="targetModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2>Modal Title</h2>
      </div>
      <div class="modal-body">
        <p>Modal Body</p>
      </div>
      <div class="modal-footer">
        <a id="close-trigger" tabindex="-1" data-dismiss="modal">
          <span class="first">Close</span>
          <span class="second"></span>
        </a>
      </div>
    </div>
  </div>
</div>

3. The CSS/CSS3 styles for the sliding panel.

.modal {
  background-color: rgba(0, 0, 0, 0.75);
  position: absolute;
  top: -100%;
  outline: 0 !important;
  text-align: center;
  padding: 5em;
  -webkit-transition: top 0.3s;
  -moz-transition: top 0.3s;
  transition: top 0.3s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
}

.modal.move-bottom { top: 0; }

4. Animated the close icon on hover using CSS3 transforms and transitions.

#close-trigger {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  position: relative;
  display: inline-block;
  text-align: center;
  width: 25px;
  height: 22px;
  cursor: pointer;
}

#close-trigger:focus { outline: 0; }

#close-trigger:hover span { background-color: #d0d3d9; }

#close-trigger:hover span.first {
  -webkit-transform: rotate(-45deg) translateY(0);
  -moz-transform: rotate(-45deg) translateY(0);
  -ms-transform: rotate(-45deg) translateY(0);
  -o-transform: rotate(-45deg) translateY(0);
  transform: rotate(-45deg) translateY(0);
}

#close-trigger:hover span.second {
  -webkit-transform: rotate(45deg) translateY(0);
  -moz-transform: rotate(45deg) translateY(0);
  -ms-transform: rotate(45deg) translateY(0);
  -o-transform: rotate(45deg) translateY(0);
  transform: rotate(45deg) translateY(0);
}

#close-trigger span {
  position: absolute;
  top: 10px;
  display: block;
  background-color: #C86BD9;
  width: 100%;
  height: 2px;
  pointer-events: none;
  -webkit-transition: -webkit-transform 0.3s, background-color 0.2s;
  -moz-transition: -moz-transform 0.3s, background-color 0.2s;
  transition: transform 0.3s, background-color 0.2s;
}

#close-trigger span.first {
  -webkit-transform: rotate(45deg) translateY(0);
  -moz-transform: rotate(45deg) translateY(0);
  -ms-transform: rotate(45deg) translateY(0);
  -o-transform: rotate(45deg) translateY(0);
  transform: rotate(45deg) translateY(0);
}

#close-trigger span.second {
  -webkit-transform: rotate(-45deg) translateY(0);
  -moz-transform: rotate(-45deg) translateY(0);
  -ms-transform: rotate(-45deg) translateY(0);
  -o-transform: rotate(-45deg) translateY(0);
  transform: rotate(-45deg) translateY(0);
}

5. The CSS/CSS3 styles for the main content move/zoom effects.

.btn-container {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
  margin: 0 10%;
  padding: 5em;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.btn-container.zAnimate {
  -webkit-transform: perspective(1000px) translateZ(-150px);
  -moz-transform: perspective(1000px) translateZ(-150px);
  transform: perspective(1000px) translateZ(-150px);
  opacity: 0.4;
}

6. Load the latest version of jQuery library at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

7. The JQuery script to active the siding panel as you click on the trigger button.

var myTrigger = $('[data-toggle="trigger"]');

myTrigger.each(function() {
  var $this = $(this),
      main = $this.closest('[data-toggle="modal"]'),
      modalId = main.data('target'),
      modal = $('#' + modalId),
      close = modal.find('[data-dismiss="modal"]');
  
  $this.on('click', function() {
    modal.addClass('move-bottom');
    main.addClass('zAnimate');
    close.addClass('is-triggered');
  });
  
  close.on('click', function() {
    modal.removeClass('move-bottom');
    main.removeClass('zAnimate');
  });
});

---

This awesome jQuery plugin is developed by gfrancesca. For more Advanced Usages, please check the demo page or visit the official website.