【发布时间】：2026-02-13 16:40:01
【问题描述】：
更新
我使用 javascript 创建了一个弹出窗口，它工作正常。问题是我在模型中使用 iframe 嵌入视频代码（Facebook）。该模型工作正常，按下十字按钮弹出窗口消失。但问题是，当使用时打开弹出窗口并播放视频，然后按十字按钮，视频会继续播放。视频必须在按下十字按钮时停止。弹出窗口正在消失，但视频在后台播放。另一个问题是 FEATURED VIDEO BUTTON 出现在我想要应用的所有产品上，该条件仅在从后端添加嵌入代码时才会显示按钮，请指导我如何做到这一点。
HTML 代码（我在 short-discription.php 中的简短描述后添加了此代码）
<a href="#jsModal" id="popup" class="jsModalTrigger">FEATURED VIDEO</a>
<div id="jsModal" class="modal">
<div class="modal__overlay jsOverlay"></div>
<div class="modal__container">
<?php
/**
* Single Product Image
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product/product-image.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce/Templates
* @version 3.5.1
*/
defined( 'ABSPATH' ) || exit;
// Note: `wc_get_gallery_image_html` was added in WC 3.3.2 and did not exist prior. This check protects against theme overrides being used on older versions of WC.
if ( ! function_exists( 'wc_get_gallery_image_html' ) ) {
return;
}
global $product;
$columns = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
$post_thumbnail_id = $product->get_image_id();
$wrapper_classes = apply_filters( 'woocommerce_single_product_image_gallery_classes', array(
'woocommerce-product-gallery',
'woocommerce-product-gallery--' . ( $product->get_image_id() ? 'with-images' : 'without-images' ),
'woocommerce-product-gallery--columns-' . absint( $columns ),
'images',
) );
//for video, need to modify the wrapper classes, as they disable click events
$video_wrapper_classes = apply_filters( 'woocommerce_single_product_image_gallery_classes', array(
'woocommerce-product-gallery--' . ( $product->get_image_id() ? 'with-images' : 'without-images' ),
'woocommerce-product-gallery--columns-' . absint( $columns ),
'images',
) );
$product_video = get_post_meta(get_the_ID(), 'product_video_field', true );
$product_sub_image = get_the_post_thumbnail($post, [120]);
?>
<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $video_wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>">
<figure class="woocommerce-product-gallery__wrapper">
<?php //if the product video field is not empty, output the video on the page.
if ( !empty($product_video)) { ?>
<div id="product-video-container">
<?php echo $product_video; ?>
</div>
<!--this is optional, display the featured image below the video, IF there is a video -->
<?php } else {
//if no video, output featured image as per default template
if ( $product->get_image_id() ) {
$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
} else {
$html = '<div class="woocommerce-product-gallery__image--placeholder">';
$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
$html .= '</div>';
}
}
?>
</figure>
</div>
<button class="modal__close jsModalClose">✕</button>
</div>
</div>
JAVASCRIPT 代码
/* This script supports IE9+ */
(function() {
/* Opening modal window function */
function openModal() {
/* Get trigger element */
var modalTrigger = document.getElementsByClassName('jsModalTrigger');
/* Set onclick event handler for all trigger elements */
for(var i = 0; i < modalTrigger.length; i++) {
modalTrigger[i].onclick = function() {
var target = this.getAttribute('href').substr(1);
var modalWindow = document.getElementById(target);
modalWindow.classList ? modalWindow.classList.add('open') : modalWindow.className += ' ' + 'open';
}
}
}
function closeModal(){
/* Get close button */
var closeButton = document.getElementsByClassName('jsModalClose');
var closeOverlay = document.getElementsByClassName('jsOverlay');
/* Set onclick event handler for close buttons */
for(var i = 0; i < closeButton.length; i++) {
closeButton[i].onclick = function() {
var modalWindow = this.parentNode.parentNode;
modalWindow.classList ? modalWindow.classList.remove('open') : modalWindow.className = modalWindow.className.replace(new RegExp('(^|\\b)' + 'open'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
/* Set onclick event handler for modal overlay */
for(var i = 0; i < closeOverlay.length; i++) {
closeOverlay[i].onclick = function() {
var modalWindow = this.parentNode;
modalWindow.classList ? modalWindow.classList.remove('open') : modalWindow.className = modalWindow.className.replace(new RegExp('(^|\\b)' + 'open'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
}
/* Handling domready event IE9+ */
function ready(fn) {
if (document.readyState != 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
/* Triggering modal window function after dom ready */
ready(openModal);
ready(closeModal);
}());
function.php 代码：
add_action( 'woocommerce_product_options_general_product_data', 'product_video_field' );
function product_video_field() {
$args = array(
'id' => 'product_video_field',
'label' => sanitize_text_field( 'Product Video' ),
'placeholder' => 'Cut and paste video embed code here',
'desc_tip' => true,
'style' => 'height:120px'
);
echo woocommerce_wp_textarea_input( $args );
}
add_action( 'woocommerce_process_product_meta', 'product_video_field_save' );
add_action( 'woocommerce_process_product_meta', 'product_video_field_save' );
function product_video_field_save($post_id) {
$product_video_field = $_POST['product_video_field'];
update_post_meta($post_id, 'product_video_field', $product_video_field);
}
【问题讨论】：
-
好吧，你无法控制
<iframe>元素内部发生的事情，但是你可以在打开和关闭模式窗口时创建和销毁元素。你同意吗？ -
是的，我不在乎，我只是希望它在关闭弹出窗口时停止
标签： javascript php wordpress model popup