Question

HTML

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{
	-webkit-animation-name:fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}
@-webkit-keyframes fade{
	from {opacity: .4}
	to {opacity: 1.0}
}
@keyframes fade{
	from{opacity: .4}
	to {opacity: 1.0}
}
.fourth_box{
	height: 85px;
	background-color: cadetblue;
	padding-bottom: 50px;
}
@keyframes slider{
	0%{
		left: 0;
	}
	20%{
		left 0;
	}
	25%{
		left: -100%;
	}
	45%{
		left: -100%;
	}
	50%{
		left: -200%;
	}
	70%{
		left: -200%;
	}
	75%{
		left: -300%;
	}
	95%{
		left: -400%;
	}
	100%{
		left: -400%;
	}
}
# 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 {
	width: 400 px;
	position: relative;
	margin: 10 % auto;
	padding: 5 px 20 px 13 px 20 px;
	border - radius: 10 px;
	background: #fff;
	background: -moz - linear - gradient(#fff, #999);
	background: -webkit-linear-gradient(# fff, #999);
	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)">&#10094;</a>
      <a class="prev" onclick="plusSlides(-1)">&#10094;</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

如果您需要其他信息，请查看代码笔。每当我按下联系信息链接时，我一直在工作的代码似乎没有打开模态框。

Answer 1

您可以使用jquery在单击按钮时显示模态

$(function() {                       
  $("#myBtn").click(function() {  
    $(".modal").css("display", "block");      
  });
});

示例：https://codepen.io/anon/pen/zEGZxO

Answer 2

尝试使用jQuery UI dialog。它基本上都是为你做的。

想不出办法让Modal Box弹出来吗？

2 个答案: