我想要woocommerce产品页面上的按钮，当我们单击该按钮时，应该弹出一个弹出窗口以显示标题并联系此人的电话。 我已经添加了按钮和一个弹出窗口，它在台式机上可以正常工作，但在移动设备上却无法正常工作，我无法关闭移动设备上的弹出窗口，因此每次关闭时都必须刷新。.
<?php
/**
* The template for displaying product content in the single-product.php template
*
* Override this template by copying it to yourtheme/woocommerce/content-single-product.php
*
* @author WooThemes
* @package WooCommerce/Templates
* @version 3.0.0
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
$selena_opt = get_option( 'selena_opt' );
global $product;
$schema = "Product";
// Downloadable product schema handling
if ( $product->is_downloadable() ) {
switch ( $product->download_type ) {
case 'application' :
$schema = "SoftwareApplication";
break;
case 'music' :
$schema = "MusicAlbum";
break;
default :
$schema = "Product";
break;
}
}
?>
<div class="container">
<?php
/**
* woocommerce_before_single_product hook
*
* @hooked wc_print_notices - 10
*/
do_action( 'woocommerce_before_single_product' );
if ( post_password_required() ) {
echo get_the_password_form();
return;
}
?>
</div>
<div itemscope itemtype="<?php echo esc_url('http://schema.org/'.$schema); ?>" id="product-<?php the_ID(); ?>" <?php
post_class(); ?>>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<div class="single-product-image">
<?php
/**
* woocommerce_before_single_product_summary hook
*
* @hooked woocommerce_show_product_sale_flash - 10
* @hooked woocommerce_show_product_images - 20
*/
do_action( 'woocommerce_before_single_product_summary' );
?>
</div>
</div>
<div class="col-xs-12 col-md-8">
<div class="summary entry-summary single-product-info">
<div class="product-nav">
<div class="next-prev">
<div class="prev"><?php previous_post_link('%link'); ?></div>
<div class="next"><?php next_post_link('%link'); ?></div>
</div>
</div>
<?php
/**
* woocommerce_single_product_summary hook
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_rating - 10
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
*/
do_action( 'woocommerce_single_product_summary' );
//echo "saif";
?><button type="button" class="btn_submit2" data-toggle="modal" style="font-
family: Ralewa;
background: #303030; border: 1px solid #303030;"data-target="#orderModal">Call for Price</button>
<div class="single-product-sharing">
<?php
if(function_exists('selena_product_sharing')) {
selena_product_sharing();
} ?>
</div>
</div><!-- .summary -->
</div>
</div>
</div>
<div class="container">
<?php
/**
* woocommerce_after_single_product_summary hook
*
* @hooked woocommerce_output_product_data_tabs - 10
* @hooked woocommerce_output_related_products - 20
*/
do_action( 'woocommerce_after_single_product_summary' );
?>
<meta itemprop="url" content="<?php the_permalink(); ?>" />
</div>
</div><!-- #product-<?php the_ID(); ?> -->
<?php do_action('woocommerce_show_related_products');
//dynamic_sidebar( 'sidebar-product' ); ?>
<?php do_action( 'woocommerce_after_single_product' ); ?>
<!-- Modal -->
<div id="orderModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<form id="order-product" class="order-product">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<div class="order-prod">
<?php /*?>Order Submission for : <?php the_title(); ?><?php */?>
<div class="text-center pop-title" style="font-family: Raleway, Arial, Helvetica, sans-serif;
font-size: 19px;
font-weight: 600;
display: block;
line-height: 62px;
min-height: 62px;
text-transform: uppercase;
position: relative;
-webkit-transition: all .4s ease-out;
color: #303030;">Product : <?php the_title(); ?>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
</div>
</div>
<?php /*?><div class="modal-body">
<div id="eqshow_message"></div>
<input type="hidden" name="enq_prodname" id="enq_prodname" value="<?php the_title(); ?>" />
<?php
$product = new WC_Product($post->ID);
$salePrice = $product ->sale_price;
if($salePrice){
$mainPrice = get_woocommerce_currency_symbol().$product ->sale_price;
} else {
$mainPrice = get_woocommerce_currency_symbol().$product ->regular_price;
}
?>
<input type="hidden" name="enq_prodprice" id="enq_prodprice" value="<?php echo $mainPrice; ?>" />
<input type="hidden" name="enq_prodqty" id="enq_prodqty" value="" />
<div class="form-group">
<input type="text" class="form-control" placeholder="First Name" name="enq_fname" id="enq_fname" autocomplete="off">
<div id="enq_fname_error" style="color:red;"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Last Name" name="enq_lname" id="enq_lname" autocomplete="off">
<div id="enq_lname_error" style="color:red;"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Email" name="enq_email" id="enq_email" autocomplete="off">
<div id="enq_email_error" style="color:red;"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Phone" name="enq_phone" id="enq_phone" autocomplete="off">
<div id="enq_phone_error" style="color:red;"></div>
</div>
<div class="form-group">
<textarea name="enq_query" id="enq_query" class="form-control" rows="4" cols="50" placeholder="Your Query"></textarea>
<div id="enq_query_error" style="color:red;"></div>
</div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block" type="button" id="btn-enquiry-submit">Order Now</button>
<!--<div class="message-log"></div>-->
</div>
</div><?php */?>
<div class="modal-body">
<div class="text-center pop-number" style="font-family: Raleway, Arial, Helvetica, sans-serif;
font-size: 19px;
font-weight: 600;
display: block;
line-height: 62px;
min-height: 62px;
text-transform: uppercase;
position: relative;
-webkit-transition: all .4s ease-out;
color: #303030;">Call for Price / Whatsapp : <span>+971 55 3263 444</span></div>
</div>
</div>
</form>
</div>
</div>
答案 0 :(得分：0)
只需将您的模型代码（从具有id“ orderModal”的div元素中）添加到wp_footer挂钩即可。
您可以使用is_product（）函数检查是否为产品页面。