Question

我有一个教程中的代码。在这里，我想让我的缩略图在点击时显示动态模态，用户可以在其中编辑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>

Answer 1

请参阅以下代码：

HTML代码

public class Book
{
    [Key]
    public int id { get; set; }

    public string Title { get; set; }

    public Label Label {get;set;}

}

public class Label
{
    [Key]
    public int id { get; set; }

    public string Name { get; set; }

    public Book Book { get; set; }
}

CSS代码

<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>

单击模式显示时的图像缩略图

1 个答案: