[英]Click on box for popup image and bio
我正在WordPress中建立網站,但無法使用我的JavaScript。
我試圖產生與此類似的效果: 單擊此處 ,當您單擊顧問的框時,將彈出圖像和簡介。
我已經制作了JavaScript並將其全部鏈接起來-但是無法加載該框。
*/
$(document).ready(function() {
/*
*/
$('.classes a').click(function(e) {
e.preventDefault();
// Get the dimensions of the user's screen
var maskHeight = $(document).height();
var maskWidth = $(window).width();
// Set the mask overlay to fill the entire screen
$('.mask').css({'width':maskWidth,'height':maskHeight});
// Fade in the mask overlay
$('.mask').fadeTo(600, 0.7);
// Get the dimensions of the user's browser
var winHeight = $(window).height();
var winWidth = $(window).width();
// Set the bio pop-up to be in the middle of the screen
$('.classes-bio').css('top', winHeight/2-$('.classes-bio').height()/2);
$('.classes-bio').css('left', winWidth/2-$('.classes-bio').width()/2);
// Fade in the bio pop-up
$(this).parent('.classes').find('.classes-bio').delay(610).fadeIn(600);
});
// Click the mask or close button to fade out the pop-up and the mask
$('.mask, img.close-button').click(function(e) {
$('.classes-bio, .video-box').fadeOut(600);
$('.mask').delay(610).fadeOut(600);
});
/*
CSS:
.classes {
margin-bottom: 75px;
}
.classes {
width: 450px;
float: left;
margin: 10px 8px 0 0;
}
.classes:nth-child(4n+4) {
margin-right: 0;
}
.classes a {
text-decoration: none;
}
.classes h2,
.classes .classes-bio h2 {
font-weight: 700;
font-size: 1.5em;
text-transform: none;
margin: 15px 0 5px 12px;
}
.classes .classes-bio p {
color: #666;
line-height: 21px;
margin: 0 70px 18px 70px;
}
.classes .classes-bio p strong {
font-weight: 700;
}
.classes a.read-more {
color: #D1883E;
display: block;
margin: 12px 0 0 0px;
}
.classes a.read-more:hover {
text-decoration: underline;
}
.classes .classes-bio {
position: fixed;
width: 600px;
height: 90%;
display: none;
z-index: 9998;
padding-bottom: 10px;
background-color: #eaeaea;
}
.classes .classes-bio .close-button {
position: absolute;
top: -17px;
right: -17px;
z-index: 9999;
cursor: pointer;
}
.classes .classes-bio img.profile {
width: 238px;
margin: 25px 181px 8px;
}
.classes .classes-bio h2 {
text-align: center;
margin-bottom: 6px;
}
.classes .classes-bio p.job-title {
font-size: 1.1em;
margin-bottom: 28px;
}
.classes .classes-bio p {
font-size: 0.9em;
color: #000;
text-align: center;
}
/*
.mask {
position: absolute;
left: 0;
top: 0;
display: none;
z-index: 9997;
background-color: #000;
}
看一下您提供的JavaScript代碼,我可以立即看到* /
的第一行正在阻止JavaScript正常執行。 還要刪除/ *
最后一行
嘗試修復該頁面上的所有代碼錯誤。 我進行了掃描,發現您的頁面有35個錯誤http://validator.w3.org/check?uri=http://www.scpolechamps.co.uk/classes-2/
信不信由你,標記中最簡單的錯誤可能會阻止JavaScript正常運行。
例如,在該頁面上,您具有以下內容:
<img style="border: 5px solid black;" "padding-bottom:10px;" alt="" src="/wp-content/themes/tigertone/images/pole.png" width="447" height="193" />
它應該是:
<img src="/wp-content/themes/tigertone/images/pole.png" height="193" width="447" style="border:5px solid black;padding-bottom:10px" alt="Pole Dancing">
您有style="border: 5px solid black;" "padding-bottom:10px;"
style="border: 5px solid black;" "padding-bottom:10px;"
應該放在一起的style="border:5px solid black;padding-bottom:10px"
,例如style="border:5px solid black;padding-bottom:10px"
另外,您應該避免使用內聯CSS。 要賦予圖像某種樣式,請將CSS代碼放置在外部CSS文件中,並使用與您的圖像相對應的適當CSS ID或CLASS名稱。 它將以多種方式使您和您的訪客受益。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.