javascript - 如何使用 js 触发 only-css 模式

Question

我正在使用 Bourbon modals 的 Refills，非常棒。但是，现在我需要通过 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 %>

其二:路由指向 Controller Action

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

第四:它将一些html附加到 View 中的div

$("#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.

谢谢

Answer 1

简单的解决方案是触发点击

$("#modal-1").trigger("click");