單擊模式顯示時的圖像縮略圖

我有一個教程中的代碼。在這裏，我想讓點擊時的縮略圖，動態模式將顯示，用戶可以在其中編輯onlick模式中的內容。我有一個類別列表，在我的縮略圖中，我把<a href>顯示出我的模式。我是一個初學者在WordPress的單擊模式顯示時的圖像縮略圖

我的問題：我真的不明白我在哪裏可以創建我的模態？我知道關於我的模態的循環帖子，但它是一個帖子嗎？我會在哪裏創建我的動態模態？是否通過郵寄？。我應該創建一個帖子，以及如何將它鏈接到一個模式？我應該創建一個類別來知道這個帖子是一個模式嗎？

下面是代碼：

<div class="row"> 
     <div class="col-xs-4"> 
     <ul class="categories-filters"> 
      <?php 
       $args2 = array(
        'exclude' => array(6,3,2), 
        'order' => 'DESC', 
        'title_li' => __(''), 
        'posts_per_page' => '6', 
        'hierarchical' => 'true' 
       ); 
      wp_list_categories($args2); 
      ?> 
     </ul> 
     </div> 
     <div class="col-xs-8 bot"> 
      <div id="inside" class="row row-left"> 
      <?php if(have_posts()) : 
       $count = 0; 
       while(have_posts()) : the_post(); ?> 

       <div class="col-xs-8 col-box2"> 
        <a href="#myModal-<? the_ID(); ?>" data-toggle="modal" ><?php the_post_thumbnail('thumbnail'); ?></a> 
       </div> 
        <?php if($count==2) : 
         echo '</div>'; 
         echo '<div id="inside" class="row row-left">'; 
        endif; 
        $count++; endwhile; 
       endif; 
       wp_reset_postdata(); 
       ?> 
      </div> 
     </div> 
    </div>

這裏是我的模式：

<div id="myModal-<? the_ID(); ?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-header"> 
     <h3 id="myModalLabel"> 
      <?php the_title();?> 
     </h3> 
     <p> 
      <?php the_content();?> 
     </p> 
     </div> 
     <div class="modal-body"> 
     <?php the_post_thumbnail(); ?> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     </div> 
    </div>

來源

2016-12-06 Jc John

請看下面的代碼：

HTML代碼

<h1>Popup/Modal Windows without JavaScript</h1> 
<div class="box"> 
    <a class="button" href="#popup1">Let me Pop up</a> 
</div> 

<div id="popup1" class="overlay"> 
    <div class="popup"> 
     <h2>Here Title of model</h2> 
     <a class="close" href="#">&times;</a> 
     <div class="content"> 
      <!-- your content to display in popup --> 
     </div> 
    </div> 
</div>

CSS代碼

body { 
    font-family: Arial, sans-serif; 
    background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat; 
    background-size: cover; 
    height: 100vh; 
} 

h1 { 
    text-align: center; 
    font-family: Tahoma, Arial, sans-serif; 
    color: #06D85F; 
    margin: 80px 0; 
} 

.box { 
    width: 40%; 
    margin: 0 auto; 
    background: rgba(255,255,255,0.2); 
    padding: 35px; 
    border: 2px solid #fff; 
    border-radius: 20px/50px; 
    background-clip: padding-box; 
    text-align: center; 
} 

.button { 
    font-size: 1em; 
    padding: 10px; 
    color: #fff; 
    border: 2px solid #06D85F; 
    border-radius: 20px/50px; 
    text-decoration: none; 
    cursor: pointer; 
    transition: all 0.3s ease-out; 
} 
.button:hover { 
    background: #06D85F; 
} 

.overlay { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(0, 0, 0, 0.7); 
    transition: opacity 500ms; 
    visibility: hidden; 
    opacity: 0; 
} 
.overlay:target { 
    visibility: visible; 
    opacity: 1; 
} 

.popup { 
    margin: 70px auto; 
    padding: 20px; 
    background: #fff; 
    border-radius: 5px; 
    width: 30%; 
    position: relative; 
    transition: all 5s ease-in-out; 
} 

.popup h2 { 
    margin-top: 0; 
    color: #333; 
    font-family: Tahoma, Arial, sans-serif; 
} 
.popup .close { 
    position: absolute; 
    top: 20px; 
    right: 30px; 
    transition: all 200ms; 
    font-size: 30px; 
    font-weight: bold; 
    text-decoration: none; 
    color: #333; 
} 
.popup .close:hover { 
    color: #06D85F; 
} 
.popup .content { 
    max-height: 30%; 
    overflow: auto; 
} 

@media screen and (max-width: 700px){ 
    .box{ 
     width: 70%; 
    } 
    .popup{ 
     width: 70%; 
    } 
}

來源

2016-12-06 04:57:46

單擊模式顯示時的圖像縮略圖

回答

相關問題