只是为了说明我的回答,对于JQUERY,我绝对是新手。JQuery函数根据隐藏的HTML输入元素的值显示元素
我试图创建一个DOM就绪函数,它取得一个隐藏的HTML输入字段的值,如果值是...(某些)然后显示某个<div>
类。
这里是我的代码:
JS - 更新
$(document).ready(function(){
var money = 19.95;
/* not sure if this is written correctly, but this is supposed to
check whether the hidden input element value is equal to var money */
if ($("input[id='VAT_shipping'][type='hidden']").val() == money) {
$("#ac-wrapper").show();
$("#popup").show();
};
// hide popup when user clicks on close button
$(".close-btn").click(function(){
$("#ac-wrapper").hide();
// hide
});
// hides the popup if user clicks anywhere outside the container
$("#ac-wrapper").click(function(){
$("#popup").hide();
})
// prevents the overlay from closing if user clicks inside the popup overlay
$("#ac-wrapper.").click(function(e) {
e.preventDefault();
var $this = $(this);
var horizontalPadding = 30;
var verticalPadding = 30;
});
});
HTML
<input type="hidden" id="VAT_shipping" value="<? print $shipping; ?>" />
<div id="ac-wrapper">
<div id="popup">
<center>
<p>
<strong> You have selected World Free Tax Zone - £19.95 for shipping. </strong>
We will automatically remove the VAT - 20% from your order.
Please click close to return to review your order.
</p>
<button class="close-btn">Close</button>
</center>
</div>
</div>
CSS
#ac-wrapper {
display:none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
#popup {
width: 555px;
height: 375px;
background: #FFFFFF;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 200px; left: 375px;
font-size: 16px;
font-family: 'Oxygen', sans-serif;
text-align: center
}
.close-btn {
cursor: pointer;
font-family:Tahoma, Geneva, sans-serif;
border: 1px solid #000000;
color: #ffffff;
background-color: #AC9E33;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 1px #000000;
font: bold 11px Sans-Serif;
text-transform:none;
padding: 7px 12px;
margin:0;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-ms-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.close-btn:hover {
font-family:Tahoma, Geneva, sans-serif;
border: 1px solid #000000;
color: #ffffff;
background-color: #515280;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 1px #000000;
font: bold 11px Sans-Serif;
text-transform:none;
padding: 7px 12px;
margin:0;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-ms-transition: background-color 0.3s;
transition: background-color 0.3s;
}
因此,jQuery函数检查shipping
输入字段的值,如果它等于var money = 19.95
,则会显示ac-wrapper
和嵌套popup
。然后客户端可以关闭这个窗口,使用`close-btn'或单击元素外部。
有人可以解释如何做到这一点,请。
2的问题。在Jquery上,你正在搜索类名'.',但是在HTML上有id名''' – DaniP 2014-10-27 14:06:45
谢谢Amit - 我不得不在CSS上改变一些东西,但你'如果语句'已经工作。 – aphextwix 2014-10-27 15:00:41