Javascript 只有在默认情况下未隐藏时,才会显示模态
最近,当按下“添加到购物车”按钮时,我被要求向WooCommerce产品页面添加一个模式。首先,我复制并修改了w3modal示例,并将其插入到我孩子主题的singleproduct>addtocart>simple.php文件中。当我注释掉默认情况下隐藏模式的CSS行时,单击按钮会显示模式,就像在示例中一样。但是,当我保持该行处于启用状态时,按下按钮时,模式将不会显示。我曾尝试使用“不透明度”(opacity)而不是“显示”(display)属性,但并没有获得有意义的不同结果。我对基本的HTML有一些经验,对PHP几乎没有经验,但我对发生的事情的最好猜测是,这是某种形式的执行顺序问题 下面是来自的演示代码Javascript 只有在默认情况下未隐藏时,才会显示模态,javascript,php,html,woocommerce,Javascript,Php,Html,Woocommerce,最近,当按下“添加到购物车”按钮时,我被要求向WooCommerce产品页面添加一个模式。首先,我复制并修改了w3modal示例,并将其插入到我孩子主题的singleproduct>addtocart>simple.php文件中。当我注释掉默认情况下隐藏模式的CSS行时,单击按钮会显示模式,就像在示例中一样。但是,当我保持该行处于启用状态时,按下按钮时,模式将不会显示。我曾尝试使用“不透明度”(opacity)而不是“显示”(display)属性,但并没有获得有意义的不同结果。我对基本的HTML
模态示例
开放模态
&时代;
模态中的一些文本
正文{字体系列:Arial,Helvetica,无衬线;}
/*模态(背景)*/
.莫代尔{
显示:无;/*默认情况下隐藏*/
位置:固定;/*保持原位*/
z指数:1;/*位于顶部*/
填充顶部:100px;/*框的位置*/
左:0;
排名:0;
宽度:100%;/*全宽*/
高度:100%;/*全高*/
溢出:自动;/*根据需要启用滚动*/
背景色:rgb(0,0,0);/*回退色*/
背景色:rgba(0,0,0,0.4);/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
背景色:#fefe;
保证金:自动;
填充:20px;
边框:1px实心#888;
宽度:80%;
}
/*关闭按钮*/
.结束{
颜色:#AAAAA;
浮动:对;
字号:28px;
字体大小:粗体;
}
.关闭:悬停,
.结束:聚焦{
颜色:#000;
文字装饰:无;
光标:指针;
}
//获取模态
var modal=document.getElementById('myModal');
//获取打开模式对话框的按钮
var btn=document.getElementById(“myBtn”);
//获取关闭模态的元素
var span=document.getElementsByClassName(“关闭”)[0];
//当用户单击该按钮时,打开模式对话框
btn.onclick=函数(){
modal.style.display=“块”;
}
//当用户单击(x)时,关闭模式对话框
span.onclick=函数(){
modal.style.display=“无”;
}
//当用户单击模式之外的任何位置时,将其关闭
window.onclick=函数(事件){
如果(event.target==模态){
modal.style.display=“无”;
}
}
下面是我的simple.php文件的相关部分:
defined( 'ABSPATH' ) || exit;
global $product;
if ( ! $product->is_purchasable() ) {
return;
}
echo wc_get_stock_html( $product ); // WPCS: XSS ok.
if ( $product->is_in_stock() ) : ?>
<?php do_action( 'woocommerce_before_add_to_cart_form' ); ?>
<!-- Add code for modal here -->
<!-- Some style stuff -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>SAMPLE TEXT HERE</p>
</div>
</div>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
/*display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 500px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #ff0080;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
<form class="cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data'>
<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
<?php
do_action( 'woocommerce_before_add_to_cart_quantity' );
/*woocommerce_quantity_input( array(
'min_value' => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
'max_value' => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( wp_unslash( $_POST['quantity'] ) ) : $product->get_min_purchase_quantity(), // WPCS: CSRF ok, input var ok.
) ); */
do_action( 'woocommerce_after_add_to_cart_quantity' );
?>
<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementsByClassName("single_add_to_cart_button button alt");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
modal.style.display = "none";
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
</form>
<?php do_action( 'woocommerce_after_add_to_cart_form' ); ?>
<?php endif; ?>
已定义('ABSPATH')| |退出;
全球$产品;
如果(!$product->可购买()){
返回;
}
echo wc_get_stock_html($product);//WPCS:XSS没问题。
如果($product->库存中()):?>
&时代;
这里是示例文本
正文{字体系列:Arial,Helvetica,无衬线;}
/*模态(背景)*/
.莫代尔{
/*显示:无;/*默认情况下隐藏*/
位置:固定;/*保持原位*/
z指数:1;/*位于顶部*/
填充顶部:500px;/*盒子的位置*/
左:0;
排名:0;
宽度:100%;/*全宽*/
高度:100%;/*全高*/
溢出:自动;/*根据需要启用滚动*/
背景色:rgb(0,0,0);/*回退色*/
背景色:rgba(0,0,0,0.4);/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
背景色:#ff0080;
保证金:自动;
填充:20px;
边框:1px实心#888;
宽度:80%;
}
/*关闭按钮*/
.结束{
颜色:#AAAAA;
浮动:对;
字号:28px;
字体大小:粗体;
}
.关闭:悬停,
.结束:聚焦{
颜色:#000;
文字装饰:无;
光标:指针;
}
按钮被抓住了,模态正在准备做它的事情。然而,表单随后被提交,浏览器完成了它的工作——导航离开页面。我对您的代码做了一些修改,所以现在它捕获并阻止表单提交
//获取模式
var modal=document.getElementById('myModal');
//拿到表格
var form=document.getElementById('myForm');
//获取关闭模态的元素
var span=document.getElementById('myModalClose');
//当用户单击该按钮时,打开模式对话框
form.onsubmit=函数(){
modal.style.display=“块”;
返回false;
}
//当用户单击(x)时,关闭模式对话框
span.onclick=函数(){
modal.style.display=“无”;
}
//当用户单击模式之外的任何位置时,将其关闭
window.onclick=函数(事件){
如果(event.target==模态){
modal.style.display=“无”;
}
}
body{font-family:Arial、Helvetica、sans-serif;}
/*模态(背景)*/
.莫代尔{
显示:无;/*默认情况下隐藏*/
位置:固定;/*保持原位*/
z指数:1;/*位于顶部*/
填充顶部:500px;/*盒子的位置*/
左:0;
排名:0;
宽度:100%;/*全宽*/
高度:100%;/*全高*/
溢出:自动;/*根据需要启用滚动*/
背景色:rgb(0,0,0);/*回退色*/
背景色:rgba(0,0,0,0.4);/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
背景色:#ff0080;
保证金:自动;
填充:20px;
边框:1px实心#888;
宽度:80%;
}
/*关闭按钮*/
.结束{
颜色:#AAAAA;
浮动:对;
字号:28px;
字体大小:粗体;
}
.关闭:悬停,
.结束:聚焦{
颜色:#000;
文字装饰:无;
光标:指针;
}
&时代;
这里是示例文本
我的纽扣
var btn=document.getElementsByClassName(“single\u add\u to\u cart\u button alt”)然后是btn.onclick=function(){…}
。无法将事件附加到节点列表。
defined( 'ABSPATH' ) || exit;
global $product;
if ( ! $product->is_purchasable() ) {
return;
}
echo wc_get_stock_html( $product ); // WPCS: XSS ok.
if ( $product->is_in_stock() ) : ?>
<?php do_action( 'woocommerce_before_add_to_cart_form' ); ?>
<!-- Add code for modal here -->
<!-- Some style stuff -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>SAMPLE TEXT HERE</p>
</div>
</div>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
/*display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 500px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #ff0080;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
<form class="cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data'>
<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
<?php
do_action( 'woocommerce_before_add_to_cart_quantity' );
/*woocommerce_quantity_input( array(
'min_value' => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
'max_value' => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( wp_unslash( $_POST['quantity'] ) ) : $product->get_min_purchase_quantity(), // WPCS: CSRF ok, input var ok.
) ); */
do_action( 'woocommerce_after_add_to_cart_quantity' );
?>
<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementsByClassName("single_add_to_cart_button button alt");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
modal.style.display = "none";
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
</form>
<?php do_action( 'woocommerce_after_add_to_cart_form' ); ?>
<?php endif; ?>