-3
Hallo Leute, aus irgendeinem Grund funktioniert diese Variable nicht auf meiner Datei. Ich habe ein Bild, und wenn der Benutzer darüber schwebt, soll es eine Wischbox mit einigen Informationen über das Bild zeigen. Die Box wird jedoch aus irgendeinem Grund nicht angezeigt.Js var, nicht definiert
HTML/JS:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="css/custom.css" rel="stylesheet">
<script type="text/javascript">
var modal = $('.modal');
modal.hover(function() {
$(this).toggleClass('open');
});
alsolike(
"qEybdR", "Checkbox Radial Wash",
"dPdoNp", "Google Messenger Icon Button",
"BJAjF", "Masonry Multi Column Grid"
);
</script>
</head>
<body>
<a class="drib" href="http://drbl.in/okRS">View it on Dribbble <i class="fa fa-dribbble"></i></a>
<div class="modal">
<div class="image-container"></div>
<div class="content">
<div class="wrapper">
<div class="category">First Drive Review</div>
<h2>2015 Dodge Challenger SRT Hellcat</h2>
<h4>Andy Wendler <span>from</span> July 2014</h4>
<div class="line"></div>
<p>Make room, Beelzebub, there’s a new demon-prince pony car in town, and it’s from the people who once brought you a real Demon. Known in this mortal realm as the Dodge Challenger SRT Hellcat...</p><a href="http://www.caranddriver.com/reviews/2015-dodge-challenger-srt-hellcat-first-drive-review">Read More <i class="fa fa-caret-right"></i></a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
.modal {
width: 600px;
height: 400px;
margin: 50px auto;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
position: relative;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.modal .image-container {
background: url("http://media.caranddriver.com/images/14q3/612022/2015-dodge-challenger-srt-hellcat-first-drive-review-car-and-driver-photo-615298-s-original.jpg");
background-size: cover;
background-position: center center;
display: inline-block;
width: 100%;
height: 100%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.modal .content {
width: 40%;
height: 100%;
position: absolute;
right: -40%;
top: 0;
background: white;
box-shadow: -10px 0 25px rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.modal .wrapper {
width: 100%;
height: 100%;
position: relative;
padding: 24px;
}
.modal .wrapper h2 {
font-family: "Georgia", serif;
font-style: italic;
font-weight: bold;
font-size: 26px;
line-height: 32px;
margin: 8px 0 10px 20px;
opacity: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.modal .wrapper h4 {
text-transform: uppercase;
color: #999;
font-size: 12px;
position: relative;
top: 4px;
opacity: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.modal .wrapper h4 span {
text-transform: none;
font-style: italic;
font-family: "Georgia", serif;
}
.modal .wrapper .category {
background: #333;
padding: 7px 15px;
display: inline-block;
color: white;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
font-weight: 500;
position: absolute;
top: -24px;
left: 20px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.modal .wrapper .line {
width: 50px;
height: 2px;
opacity: 0;
background: #E3000C;
margin: 16px 0 14px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.modal .wrapper p {
font-size: 14px;
line-height: 24px;
opacity: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.modal .wrapper p span {
text-transform: uppercase;
font-size: 0.75em;
font-weight: 500;
letter-spacing: 0.5px;
}
.modal .wrapper a {
display: block;
text-align: right;
text-decoration: none;
font-style: italic;
font-size: 12px;
color: #999;
font-family: "Georgia", serif;
margin-top: 12px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
opacity: 0;
}
.modal .wrapper a i.fa {
-webkit-transition: all 0.2s;
transition: all 0.2s;
margin-left: 2px;
color: #E3000C;
}
.modal .wrapper a:hover {
color: #E3000C;
}
.modal .wrapper a:hover i.fa {
margin-left: 12px;
}
.modal.open .image-container {
width: 60%;
}
.modal.open .content {
right: 0;
}
.modal.open .content .category {
top: 0;
}
.modal.open .content h2 {
opacity: 1;
margin-left: 0;
}
.modal.open .content h4 {
top: 0;
opacity: 1;
}
.modal.open .content .line {
width: 90px;
opacity: 1;
}
.modal.open .content p {
opacity: 1;
}
.modal.open .content a {
opacity: 1;
}
.trigger {
position: absolute;
top: 24px;
right: 24px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
color: #333;
}
* {
box-sizing: border-box;
}
.drib {
text-align: center;
display: block;
margin-top: 20px;
color: #fff;
}
.drib .fa {
color: #ea4c89;
}
body {
background: #777;
font-family: "Lato", sans-serif;
}
Danke für die Hilfe
Sieht so aus, als ob Ihr Skript läuft, bevor Sie jQuery eingebunden haben - also wird '$' nicht definiert und Sie sollten einen Fehler in der Konsole Ihres Browsers bekommen, der Ihnen dies sagt. –
Verschieben Sie den Skriptblock mit dem modalen Teil am Ende der Seite, direkt vor dem '