javascript - 在 fancybox 中隐藏 div 但在普通页面上显示

Question

我想做的是以下内容。

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

但是，这是我的问题，我也希望访问者能够像往常一样访问该页面。但现在有了页眉/导航/页脚以及您通常会在网页上看到的所有内容。

我尝试使用媒体查询(fancybox 窗口是 900x700)，但没有用。我尝试了一些 javascript:

$(window).resize(function() {

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

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

  } else {

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

    }

});

还是不走运!

有谁知道我该怎么做才能让它发挥作用？

更新: 一些代码示例。

我如何加载我的 fancybox 内容:

<?php echo get_the_term_list_inclusief( $post->ID, 'inclusief', '<p class="extra-text"><i class="fa fa-check"></i>&nbsp;', '<br><i class="fa fa-check"></i>&nbsp;', '</p>'); ?>

一些不起作用的 CSS:

@media only screen and (max-width:85em) and (min-width:50em) { 
    .fancybox-inner .single-incl-opt-out {display: none;}
}

当我更改主窗口大小时 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>';
    }

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

Answer 1

您当前基于媒体查询和窗口大小隐藏内容的方法对移动设备不是很友好，而且 FancyBox 似乎已经支持这种方法，因为它使用的是 jQuery 的 ajax 方法。更多信息请点击此处:http://www.w3schools.com/jquery/jquery_ajax_load.asp

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

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

可在此处找到类似的问题/答案:Jquery FancyBox target specific DIV ID?