Как вызвать модальное окно только css с помощью js

Я использую модальные модели Refills by Bourbon, и они великолепны. Но теперь, когда мне нужно вызвать модальное окно с помощью JS, я не знаю, как это сделать, так как это чистый CSS и не имеет никаких документов или методов JS.

Моальное окно только CSS3:

<div class="modal">
  <label for="modal-1">
    <div class="btn js-btn">Click for Modal</div>
  </label>
  <input class="modal-state" id="modal-1" type="checkbox" />
  <div class="modal-window">
    <div class="modal-inner">
      <label class="modal-close" for="modal-1"></label>
      <h1>Modal Title</h1>
      <p class="intro">Intro text lorem ipsum dolor sit ametm, quas, eaque facilis aliquid cupiditate tempora cumque ipsum accusantium illo modi commodi  minima.</p>
      <p class="body">Body text lorem ipsum dolor ipsum dolor sit sit possimus amet, consectetur adipisicing elit. Itaque, placeat, explicabo, veniam quos aperiam molestias eriam molestias molestiae suscipit ipsum enim quasi sit possimus quod atque nobis voluptas earum odit accusamus quibusdam.</p>
    </div>
  </div>
</div>

CSS

.modal {
  $modal-padding: 3em;
  $modal-background: $base-background-color;
  $modal-close-color: $light-gray;
  $modal-image-height: 135px;
  $modal-image-width: $modal-image-height;

  label {
    cursor: pointer;
    margin-bottom: 0;
  }

  label img {
    $img-width: 300px;
    border-radius: $img-width/2;
    display: block;
    max-width: $img-width;
  }

  input[type="checkbox"] {
    display: none;
  }

  .btn {
    @include button(simple, $base-background-color);
    font-size: $base-font-size;
    margin-bottom: $base-line-height;
  }

  .modal-open {
    overflow: hidden;
  }

  .modal-window { // overlay
    @include transition(opacity .25s ease);
    @include position(fixed, 0px 0px 0px 0px);
    background: rgba(0,0,0, .85);
    opacity: 0;
    text-align: left;
    visibility: hidden;
    z-index: 99999999999;

    .modal-bg {
      @include position(absolute, 0px 0px 0px 0px);
      cursor: pointer;
    }
  }

  .modal-close {
    @include position(absolute, ($modal-padding /2) ($modal-padding /2) 0 0);
    @include size(1.5em);
    cursor: pointer;
    background: $modal-background;

    &:after,
    &:before {
      @include position(absolute, 3px 3px 0 50%);
      @include transform(rotate(45deg));
      @include size(.15em 1.5em);
      background: $modal-close-color;
      content: '';
      display: block;
      margin: -3px 0 0 -1px;
    }

    &:hover:after,
    &:hover:before {
      background: darken($modal-close-color, 10);
    }

    &:before {
      @include transform(rotate(-45deg));
    }
  }

  .modal-inner {
    @include transition(opacity .25s ease);
    border-radius: $base-border-radius;
    background: $modal-background;
    margin: auto;
    max-height: 95%;
    position: relative;
    overflow: auto;
    width: 95%;
    padding: $modal-padding /2;
    margin-top: .6em;

    @include media($medium-screen) {
      padding: $modal-padding;
      width: 60%;
      max-height: 60%;
      margin-top: 10em;
    }

    @include media($large-screen) {
      width: 50%;
      margin-top: 10em;
    }

    h1 {
      color: $base-font-color;
      margin-bottom: .6em;
      text-align: left;
      text-transform: capitalize;
    }

    p.body, p.intro {
      font-size: $base-font-size;
      max-width: 100% !important;
      text-align: left;

      &.intro {
        color: $blue;
        line-height: 1.6em;
      }

      &.body { 
        color: $base-font-color;
        line-height: 1.45em;

        @include media($medium-screen) {
          @include columns(2 8em);
        }
      }
    }

    a.cta {
      color: white;
      display: inline-block;
      margin-right: .5em;
      margin-top: 1em;

      &:last-child {
        padding: 0 2em;
      }
    }
  }

  .modal-state:checked + .modal-window {
    opacity: 1;
    visibility: visible;
  }

  .modal-state:checked + .modal-window .modal-inner {
    top: 0;
  }
}

Мне нужно, чтобы он открывался, когда пользователь нажимает кнопку.

Сначала: пользователь нажимает кнопку и переходит к маршрутам

<%= link_to "Guardar en spotbook".html_safe, photo_album_modal_path(@photo.id), remote: true %>

Второе: маршруты указывают на действие контроллера

get    '/photo/:id/album-modal', to: 'photos#albums_add_modal', as: :photo_album_modal

Третье: он отвечает js

def albums_add_modal
    @albums = current_user.albums.includes(:photos).reverse_order
    @photo = Photo.find(params[:id])
    respond_to do |format|
        format.js
    end
end

Четвертое: к элементу div в представлении будет добавлен некоторый HTML-код

$("#modal-open").html("<%= escape_javascript(render 'add_to_album_modal') %>");
$("#modal-open").HERE SHOULD BE A METHOD TO OPEN THE MODAL, BUT SINCE ITS CSS3-ONLY I DON'T KNOW HOW TO TRIGGER IT.

Спасибо