在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;}
}

當我更改主窗口大小但在fancybox窗口中不希望使用CSS時，CSS可以工作。

這是執行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>';
    }

單-[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目標特定的DIV ID？