-1
HTMLKann ich nicht herausfinden, wie die Modal Box erscheint?
html, body {
margin: 0;
}
.nav_body {
height: 100 px;
}
h1 {
position: absolute;
font - family: sans - serif;
font - size: 52 px;
text - align: center;
padding - left: 100 px;
padding - right: 100 px;
color: white;
top: 250 px;
}
.image_one {
position: relative;
width: 100 % ;
height: 800 px;
opacity: 0.85;
}
.Contact_text {
color: white;
font - size: 24 px;
position: absolute;
top: 500 px;
text - decoration: none;
font - family: sans - serif;
padding - left: 100 px;
padding - right: 100 px;
left: 400 px;
padding - top: 25 px;
padding - bottom: 25 px;
background - color: black;
opacity: 0.5;
transition - duration: 1 s;
}
.Contact_text: hover {
opacity: 1.0;
color: black;
background - color: white;
}
.Information_Text {
text - decoration: none;
color: black;
font - size: 16 px;
position: absolute;
top: 710 px;
font - family: sans - serif;
padding - left: 100 px;
padding - right: 100 px;
left: 450 px;
padding - top: 25 px;
padding - bottom: 25 px;
transition: 1 s;
}
.Down_Arrow {
top: 750 px;
position: absolute;
padding - left: 100 px;
padding - right: 100 px;
left: 490 px;
}
.Main_Image {
position: absolute;
top: 70 px;
padding - left: 100 px;
padding - right: 100 px;
left: 425 px;
}
h2 {
font - family: sans - serif;
font - size: 42 px;
text - align: center;
}
.image_One {
padding - left: 180 px;
padding - bottom: 50 px;
}
.image_Two {
padding - left: 185 px;
padding - bottom: 70 px;
}
.image_Three {
padding - left: 170 px;
top: 40 px;
padding - bottom: 50 px;
}
p1 {
font - family: sans - serif;
text - decoration: none;
font - size: 24 px;
color: white;
padding - left: 160 px;
}
p2 {
font - family: sans - serif;
text - decoration: none;
font - size: 24 px;
color: white;
padding - left: 201 px;
text - align: center;
}
p3 {
font - family: sans - serif;
text - decoration: none;
font - size: 24 px;
color: white;
padding - left: 274 px;
padding - right: 50 px;
}
.text_display {
display: inline - block;
height: 55 px;
padding - top: 25 px;
background - color: cadetblue;
width: 100 % ;
}
.second_display {
height: 200 px;
}
p4 {
font - family: sans - serif;
font - size: 14 px;
float: left;
padding - left: 120 px;
text - align: center;
}
p5 {
font - family: sans - serif;
font - size: 14 px;
text - align: center;
padding - left: 50 px;
padding - right: 100 px;
float: left;
}
p6 {
font - family: sans - serif;
font - size: 14 px;
float: left;
padding - left: 851 px;
text - align: center;
position: relative;
bottom: 65 px;
}
.third_text {
display: inline - block;
padding - top: 50 px;
padding - bottom: 20 px;
padding - left: -200 px;
position: abs;
}
.slideshow - container {
max - width: 1000 px;
position: relative;
margin: auto;
height: 300 px;
}
.mySlides {
display:;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50 % ;
width: auto;
margin - top: -22 px;
padding: 16 px;
color: white;
font - weight: bold;
font - size: 18 px;
transition: 0.6 s ease;
border - radius: 0 3 px 3 px 0;
}
.next {
right: 0;
border - radius: 3 px 0 0 3 px;
}
.prev: hover, .next: hover {
background - color: rgba(0, 0, 0, 0.8)
}
.text {
color: cadetblue;
font - size: 15 px;
padding: 8 px 12 px;
position: absolute;
bottom: 10 px;
width: 100 % ;
text - align: center;
}
.numbertext {
color: #f2f2f2;
font - size: 12 px;
padding: 8 px 12 px;
position: absolute;
top: 0;
}
.dot {
cursor: pointer;
height: 13 px;
width: 13 px;
margin: 0 2 px;
background - color: #bbb;
border - radius: 50 % ;
display: inline - block;
transition: background - color 0.6 s ease;
}
.active, .dot: hover {
background - color: #717171;
}
.fade{
\t -webkit-animation-name:fade;
\t -webkit-animation-duration: 1.5s;
\t animation-name: fade;
\t animation-duration: 1.5s;
}
@-webkit-keyframes fade{
\t from {opacity: .4}
\t to {opacity: 1.0}
}
@keyframes fade{
\t from{opacity: .4}
\t to {opacity: 1.0}
}
.fourth_box{
\t height: 85px;
\t background-color: cadetblue;
\t padding-bottom: 50px;
}
@keyframes slider{
\t 0%{
\t \t left: 0;
\t }
\t 20%{
\t \t left 0;
\t }
\t 25%{
\t \t left: -100%;
\t }
\t 45%{
\t \t left: -100%;
\t }
\t 50%{
\t \t left: -200%;
\t }
\t 70%{
\t \t left: -200%;
\t }
\t 75%{
\t \t left: -300%;
\t }
\t 95%{
\t \t left: -400%;
\t }
\t 100%{
\t \t left: -400%;
\t }
}
# slider {
overflow: hidden;
max - width: 600 px;
padding - left: 665 px;
background - color: cadetblue;
}#
slider figure img {
width: 20 % ;
float: left;
}#
slider figure {
position: relative;
width: 500 % ;
margin: 0;
left: 0;
text - align: left;
font - size: 0;
animation: 20 s slider infinite;
}
h7 {
font - size: 64 px;
font - family: sans - serif;
color: white;
right: 550 px;
position: absolute;
bottom: -715 px;
}
.contact_background {
background: rgba(0, 0, 0, 0.6);
width: 100 % ;
height: 100 % ;
position: fixed;
top: 0;
}
.About_Me {
padding - top: 50 px;
height: 150 px;
}
h9 {
font - family: sans - serif;
font - size: 64 px;
text - align: center;
}
h10 {
font - family: sans - serif;
font - size: 32 px;
text - align: center;
}
.submit_button {
text - decoration: none;
font - family: sans - serif;
font - size: 16 px;
color: white;
}
.clicktoclose {
font - family: sans - serif;
font - size: 16 px;
color: white;
text - decoration: none;
}
.Modal {
position: fixed;
z - index: 99999;
left: 0;
top: 0;
bottom: 0;
right: 0;
background - color: rgba(0, 0, 0, 0.8); - webkit - transition: opacity 400 ms ease - in ; - moz - transition: opacity 400 ms ease - in ;
transition: opacity 400 ms ease - in ;
pointer - events: none;
font - family: sans - serif;
opacity: 0;
}
.myModal: target {
opacity: 1;
pointer - events: auto;
}
.myModal > div {
\t width: 400 px;
\t position: relative;
\t margin: 10 % auto;
\t padding: 5 px 20 px 13 px 20 px;
\t border - radius: 10 px;
\t background: #fff;
\t background: -moz - linear - gradient(#fff, #999);
\t background: -webkit-linear-gradient(# fff, #999);
\t background: -o-linear-gradient(# fff, #999);
}<html>
<link rel="stylesheet" type= "text/css" href="css/style.css">
<script type="text/javascript" src="js/javascript_index.js"></script>
<title>Jaylen Cooper</title>
<body>
<div class="image_one">
<img src="http://127.0.0.1:59080/images/web-development-cropped.jpg" class="image_one">
<img src="images/068725-black-ink-grunge-stamp-textures-icon-alphanumeric-x-mark.png" class="Main_Image" height="200px;">
<h1>Hello, My Name Is Jaylen Cooper, And I Develop Websites and User Interfaces</h1>
<div class="Contact_Box">
<a href="#myModal" class="Contact_text"><b>Contact Information</b></a>
</div>
<div id="myModal" class="Modal">
<div id="modal" class="Modal">
<h10>Fill in The Information & Submit! </h10>
<p7>Email</p7>
<p8>Category</p8>
<p9>Explanation</p9>
<a href="#" class="submit_button">SUBMIT</a>
<div class="clicktoclose">Click to Close</div>
</div>
</div>
<div>
<a href="#slider" class="Information_Text" style="transition: 0.5s"><b>More Information</b></a>
<a href="#slider" style="transition: : : 0.5s">
<img src="images/60995.png" class="Down_Arrow" height="50px">
</a>
</div>
<div class="nav_body">
<h2><b><center>My Preference</center></b></h2>
</div>
<div>
<img src="http://127.0.0.1:54811/images/509808177.jpg" height="150px" class="image_One">
<img src="http://127.0.0.1:54811/images/code-break.png" height="100px" class="image_Two">
<img src="http://127.0.0.1:54811/images/Handshake-vectors-photos-and-psd-files-free-download-clipart.png" height="150px" class="image_Three">
</div>
<div class="text_display">
<p1><b>COLLABORATION</b></p1>
<p2><b>CODE</b></p2>
<p3><b>IDEAS</b></p3>
</div>
<div class="third_text">
<p4><b>I'm always looking to collaborate <br> with other developers on other project<br>If you know any other coding communities <br>Feel Free To Contact Me!</b></p4>
<p5><b>The Best Languages that I know right now are<br> HTML,CSS,JavaScript,<br> and a basic ammount of Python<br> and Java</b></p5>
<p6><b>The Ideas that I usually have<br> are Website Based and Mobile<br>Want To Pursue SQL and PHP Stuff Soon</b></p6>
</div>
<div class="fourth_box">
<h7><b>WORK</b></h7>
</div>
<div id="slider">
<figure>
<img src="http://127.0.0.1:54811/images/Rough%20Draft.png" width="100%">
<div>
<h8>DISCORD BOT</h8>
<img src="http://127.0.0.1:54811/images/web-development-cropped.jpg" width="100%" height="300px">
</div>
<img src="https://cdn.elegantthemes.com/blog/wp-content/uploads/2014/09/build-portfolio-website-wordpress.jpg" width="100%" height="300px;">
<img src="https://images.adsttc.com/media/images/564c/129b/e58e/ce8c/4200/01a4/newsletter/12270481_10153781963884380_1486050979_n.jpg?1447826070" width="100%" height="300px">
<img src="http://www.sociobits.org/wp-content/uploads/2016/01/social-media-for-promoting-work-696x464.jpg" width="100%" height="300px">
</figure>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<br>
<div style="text-align: center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div class="About_Me">
<h9><b><center>ABOUT ME</center></b></h9>
</div>
</div>
</body>
</html>https://codepen.io/anon/pen/WZvoZr
Wenn Sie weitere Informationen benötigen, wenden Sie sich bitte an den Code Stift anschauen. Der Code, an dem ich gearbeitet habe, scheint die Modal-Box nicht zu öffnen, wenn ich den Contact Information Link drücke.
Blick auf [dieser] (https://jsfiddle.net/who9v6ww/) –
bla bla blahb bla bla bla blahb bla bla bla blahb bla bla bla blahb bla bla bla blahb blahblah blah blah blahb – user5014677