title: How to slide modal windows from left and right of page
body: <p>I wish to have two modal windows hidden, and toggle them to slide in from the left, and another to slide in from the right.
  In the fiddle I have created, the left, and right, modal windows align correctly to the left and right of the page, however. The left modal slides in from right instead of sliding &quot;out&quot; from the left margin.
  <a href="https://jsfiddle.net/BigKev/vyhpz0d7/1/" rel="nofollow noreferrer">Fiddle Here</a></p>
  <p>When I try to have the left modal window slide from the left, I lose the slide-out effect.</p>
  <pre class="lang-css prettyprint-override"><code>#rightModal .modal-dialog-slideout {
    min-height: 100%;
    margin: 0 0 0 auto;
    background: #fff;
  }
  
  #rightModal .modal.fade .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(100%, 0)scale(1);
    transform: translate(100%, 0)scale(1);
  }
  
  #rightModal .modal.fade.show .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    display: flex;
    align-items: stretch;
    -webkit-box-align: stretch;
    height: 100%;
  }
  
  #rightModal .modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  #rightModal .modal-dialog-slideout .modal-content {
    border: 0;
  }
  
  #rightModal .modal-dialog-slideout .modal-header,
  .modal-dialog-slideout .modal-footer {
    height: 69px;
    display: block;
  }
  
  #rightModal .modal-dialog-slideout .modal-header h5 {
    float: left;
    color: blue;
  }
  
  #leftModal .modal-dialog-slideout {
    min-height: 100%;
    margin: 0 auto 0 0;
    background: #fff;
  }
  
  #leftModal .modal.fade .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(-100%, 0)scale(1);
    transform: translate(-100%, 0)scale(1);
  }
  
  #leftModal .modal.fade.show .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    display: flex;
    align-items: stretch;
    -webkit-box-align: stretch;
    height: 100%;
  }
  
  #leftModal .modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  #leftModal .modal-dialog-slideout .modal-content {
    border: 0;
  }
  
  #leftModal .modal-dialog-slideout .modal-header,
  .modal-dialog-slideout .modal-footer {
    height: 69px;
    display: block;
  }
  
  #leftModal .modal-dialog-slideout .modal-header h5 {
    float: left;
    color: red;
  }
  </code></pre>
  <p>How to maintain the slide-out effect, and maintain positions of the two modals?</p>