我创建了一个自定义帖子类型和一个自定义元框，在其中我创建了一篇新帖子并将Youtube URL输入到元框中，我在iframe中的自定义模板页面上调用它，iframe位于modal（Drublic CSS modal）窗口中，单击帖子标题将打开modal窗口。

meta框将在页面上返回一个值，但是当您打开modal时，它会显示为每个帖子输入的最新URL。

如何让每个模式框显示分配给它的视频？

如果这令人困惑，下面是错误所在的页面：http://www.josephkatool.com/Pell/media

下面是帖子的代码：

<?php query_posts( \'post_type=videos\');?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<article class="post" id="post-<?php the_ID(); ?>">

<h2><a href="#modal-text" class="call-modal" ><?php the_title(); ?></a></h2>

<section class="semantic-content" id="modal-text" tabindex="-1"

 role="dialog" aria-labelledby="modal-label" aria-hidden="true">

<div class="modal-inner">
<div class="modal-content">

<iframe width="560" height="315" src="//<?php echo get_post_meta($post->ID, "pell_video_url", true); ?>" frameborder="0" allowfullscreen></iframe> 

</div>
</div>

<a href="#!" class="modal-close" title="Close this modal" data-close="Close" data-dismiss="modal">×</a>
</section>

</article>

<?php endwhile; endif; ?>

我已经想了一段时间了，我想我疯了！！谢谢

编辑：以下是我用来保存元框的代码：

 function pell_video_save_post_class_meta( $post_id, $post ) {

if ( !isset( $_POST[\'pell_video_url_nonce\'] ) || !wp_verify_nonce( $_POST[\'pell_video_url_nonce\'], basename( __FILE__ ) ) )
    return $post_id;

$post_type = get_post_type_object( $post->post_type );

if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )
    return $post_id;

$new_meta_value = ( isset( $_POST[\'pell-video-url\'] ) ? esc_attr( $_POST[\'pell-video-url\'] ) : \'\' );

$meta_key = \'pell_video_url\';

$meta_value = get_post_meta( $post_id, $meta_key, true );

if ( $new_meta_value && \'\' == $meta_value )
    add_post_meta( $post_id, $meta_key, $new_meta_value, true );

elseif ( $new_meta_value && $new_meta_value != $meta_value )
    update_post_meta( $post_id, $meta_key, $new_meta_value );

elseif ( \'\' == $new_meta_value && $meta_value )
    delete_post_meta( $post_id, $meta_key, $meta_value );
}

这是js。这是Drublic CSS js脚本：

(function (global) {

    \'use strict\';

    // Storage variable
    var modal = {};

    // Store for currently active element
    modal.lastActive = undefined;
    modal.activeElement = undefined;

    // Polyfill addEventListener for IE8 (only very basic)
    modal._addEventListener = function (element, event, callback) {
        if (element.addEventListener) {
            element.addEventListener(event, callback, false);
        } else {
            element.attachEvent(\'on\' + event, callback);
        }
    };

    // Hide overlay when ESC is pressed
    modal._addEventListener(document, \'keyup\', function (event) {
        var hash = window.location.hash.replace(\'#\', \'\');

        // If hash is not set
        if (hash === \'\' || hash === \'!\') {
            return;
        }

        // If key ESC is pressed
        if (event.keyCode === 27) {
            window.location.hash = \'!\';

            if (modal.lastActive) {
                return false;
            }

            // Unfocus
            modal.removeFocus();
        }
    }, false);

    // Convenience function to trigger event
    modal._dispatchEvent = function (event, modal) {
        var eventTigger;

        if (!document.createEvent) {
            return;
        }

        eventTigger = document.createEvent(\'Event\');

        eventTigger.initEvent(event, true, true);
        eventTigger.customData = { \'modal\': modal };

        document.dispatchEvent(eventTigger);
    };


    // When showing overlay, prevent background from scrolling
    modal.mainHandler = function () {
        var hash = window.location.hash.replace(\'#\', \'\');
        var modalElement = document.getElementById(hash);
        var htmlClasses = document.documentElement.className;
        var modalChild;
        var oldModal;

        // If the hash element exists
        if (modalElement) {

            // Get first element in selected element
            modalChild = modalElement.children[0];

            // When we deal with a modal and body-class `has-overlay` is not set
            if (modalChild && modalChild.className.match(/modal-inner/)) {
                if (!htmlClasses.match(/has-overlay/)) {

                    // Set an html class to prevent scrolling
                    document.documentElement.className += \' has-overlay\';
                }

                // Unmark previous active element
                if (modal.activeElement) {
                    oldModal = modal.activeElement;
                    oldModal.className = oldModal.className.replace(\' is-active\', \'\');
                }
                // Mark modal as active
                modalElement.className += \' is-active\';
                modal.activeElement = modalElement;

                // Set the focus to the modal
                modal.setFocus(hash);

                // Fire an event
                modal._dispatchEvent(\'cssmodal:show\', modal.activeElement);
            }
        } else {
            document.documentElement.className =
                    htmlClasses.replace(\' has-overlay\', \'\');

            // If activeElement is already defined, delete it
            if (modal.activeElement) {
                modal.activeElement.className =
                        modal.activeElement.className.replace(\' is-active\', \'\');

                // Fire an event
                modal._dispatchEvent(\'cssmodal:hide\', modal.activeElement);

                // Reset active element
                modal.activeElement = null;

                // Unfocus
                modal.removeFocus();
            }
        }
    };

    modal._addEventListener(window, \'hashchange\', modal.mainHandler);
    modal._addEventListener(window, \'load\', modal.mainHandler);

    /*
     * Accessibility
     */

    // Focus modal
    modal.setFocus = function () {
        if (modal.activeElement) {

            // Set element with last focus
            modal.lastActive = document.activeElement;

            // New focussing
            modal.activeElement.focus();
        }
    };

    // Unfocus
    modal.removeFocus = function () {
        if (modal.lastActive) {
            modal.lastActive.focus();
        }
    };

    // Export CSSModal into global space
    global.CSSModal = modal;

}(window));