0
我正在使用波旁模式的Refills，並且非常棒。但是，現在我需要通過JS觸發模式，我不知道該怎麼做，因爲它是純CSS，沒有任何文檔或JS方法。如何用js觸發一個唯一的CSS模式
的模式僅僅是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
四：將一些HTML附加到一個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.
感謝