Javascript 在fancybox中隐藏div，但在普通页面上显示

我想做的是以下几点

我的wordpress页面上有一个链接，可以打开fancybox窗口并显示内容。没有页眉/页脚或任何内容，只有带有缩略图的内容

但是，这是我的问题，我也希望访问者能够像平常一样访问该页面。但是现在有了页眉/导航/页脚和所有你通常在网页上看到的东西

我尝试使用媒体查询（fancybox窗口为900x700），但没有成功。我尝试了一些javascript：

$(window).resize(function() {

  if ($(this).width() < 1024) {

    $('.single-incl-opt-out').hide();

  } else {

    $('.single-incl-opt-out').show();

    }

});

当我改变我的主窗口大小时，CSS工作，但不像我希望它出现在fancybox窗口中

下面是执行fancybox的函数：

function get_the_term_list_inclusief( $id, $taxonomy, $before = '', $sep = '', $after = '') {
    $args_incl = array('order' => 'ASC');

    $terms = wp_get_object_terms( $id, $taxonomy, $args_incl );

    if ( is_wp_error( $terms ) )
        return $terms;


    if ( empty( $terms ) )
        return false;

    $links = array();

    usort($terms, function($a, $b) {
        return strcmp($a->name, $b->name);
    });

    foreach ( $terms as $term ) {
        $link = get_term_link( $term, $taxonomy, $args_incl );
        if ( is_wp_error( $link ) ) {
            return $link;
        }

        $links[] = '<a class="fancybox-incl fancybox.ajax" title="inclusief" href="' . esc_url( $link ) . '" rel="tag">' . $term->name . '</a>';
    }

函数获取\u术语列表\u包括（$id，$taxonomy，$before=''，$sep=''，$after=''）{
$args_incl=array（'order'=>'ASC'）；
$terms=wp\u get\u object\u terms（$id、$taxonomy、$args\u incl）；
如果（是错误（$terms））
返回$terms；
如果（空（$条款））
返回false；
$links=array（）；
usort（$terms，function（$a，$b）{
返回strcmp（$a->name，$b->name）；
});
foreach（$terms作为$term）{
$link=get\u term\u link（$term、$taxonomy、$args\u incl）；
如果（是错误（$link））{
返回$link；
}
$links[]=''；
}

单个-[post type]的代码。php:

<?php get_header(); ?>
<?php the_post(); ?>

<script>
$(window).resize(function() {

  if ($(this).width() < 1024) {

    $('.single-incl-opt-out').hide();

  } else {

    $('.single-incl-opt-out').show();

    }

});
</script>


<section id="inclusief" style="margin-top:15px;">
        <div class="col-sm-5 mobile">
            <h1 class="extra-title"><?php the_title(); ?></h1>
                <div class="tabcontent" id="tab-<?php the_ID(); ?>">
                    <p><?php the_content(); ?></p>
            </div>
        </div>
        <div class="col-sm-1"></div>
        <div class="col-sm-6 no-padding">
            <div class="incl">
                <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
            </div>
        </div>
</section>

$（窗口）。调整大小（函数（）{
if（$（this）.width（）<1024）{
$（'.single incl opt out'）.hide（）；
}否则{
$（'.single incl opt out'）.show（）；
}
});
您当前基于媒体查询和窗口大小隐藏内容的方法对移动设备不太友好，而且FancyBox似乎已经支持这一点，因为它使用的是jQuery的ajax方法。有关这方面的详细信息，请参见：

更新加载FancyBox的PHP函数，以包含要在其中加载的div的id：

$links[] = '<a class="fancybox-incl fancybox.ajax" title="inclusief" href="' . esc_url( $link ) . '#inclusief" rel="tag">' . $term->name . '</a>';

$links[]=''；

类似的问题/答案可以在这里找到：
那么您只想在Smaller屏幕上显示小内容，而在普通屏幕上显示整个内容？是的，也不是。我只想在fancybox窗口中显示小内容，在普通屏幕上显示整个内容。您能分享一些代码来重现这个问题吗？这样解决方案就可以了我想引用一个css文件，该文件隐藏了所有的内容，但对于较小的屏幕，fancybox除外，对于较大的屏幕，反之亦然。你如何在fancybox中加载内容？你应该隐藏不需要的div。而不是页面本身，如果你能给我们看一些代码，我可能会有所帮助。祝你好运。谢谢你的链接。无论如何。我不是这不是一个编码员。你或其他人是否可以在这方面帮助我？首先卸载链接ar显示的方式：

<?php get_header(); ?>
<?php the_post(); ?>

<script>
$(window).resize(function() {

  if ($(this).width() < 1024) {

    $('.single-incl-opt-out').hide();

  } else {

    $('.single-incl-opt-out').show();

    }

});
</script>


<section id="inclusief" style="margin-top:15px;">
        <div class="col-sm-5 mobile">
            <h1 class="extra-title"><?php the_title(); ?></h1>
                <div class="tabcontent" id="tab-<?php the_ID(); ?>">
                    <p><?php the_content(); ?></p>
            </div>
        </div>
        <div class="col-sm-1"></div>
        <div class="col-sm-6 no-padding">
            <div class="incl">
                <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
            </div>
        </div>
</section>

$links[] = '<a class="fancybox-incl fancybox.ajax" title="inclusief" href="' . esc_url( $link ) . '#inclusief" rel="tag">' . $term->name . '</a>';