当我点击图片弹出窗口时，它会显示在底部而不是顶部

Question

我正在尝试编写模态图库。我发现了一个html代码，包括一个小JS，但它没有任何CSS。因此，当我点击图像时（当前只有左上角的图像被链接起来），模态显示在底部。我对JS或模态一无所知，有人可以帮助我使用什么样的代码来使模态弹出一切？提前谢谢！

@font-face {
    font-family: Gudea;
    src: url(https://www.google.com/fonts#UsePlace:use/Collection:Gudea:400,400italic,700);
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
}

p {
	margin: 0 0 1em 0;
	font-size: 93%;
	line-height: 1.5em;
}

body {
	font-family: Helvetica, Arial, sans-serif;
	padding: 0;
	margin: 0;
	background-image: url(http://oi68.tinypic.com/9tzv4n.jpg);
}

img {
	max-width: 100%;
	height: auto;
	margin: 0 0 10px 0;
}

/* Section Inner */
div.section-inner {
	max-width: 1100px;
	padding: 0 25px;
	margin: 0 auto;
}

/* Header */
div.header {
	background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
	margin-top:40px;
	height: 30px;
	background-color: #E9E9E9;
	padding: 40px 0;
}


/*Logo*/

h1 span {
    position: absolute;
    top: 97px;
    left: 50%;
    width: 402px;
    height: 160px;
    margin: -80px 0 0 -201px;
    text-indent: -999em;
    z-index: 99;
    background: url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1Logo.png);
}

/*Satooth Pattern*/

h2 span {
    position: absolute;
    top: 140px;
    height: 20px;
    text-indent: -999em;
    z-index: 90;
    background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
    background-repeat: repeat-x;
    width: 100%;
}


/*Sawtooth Pattern Two*/

h3 span {
    position: absolute;
    margin-top: -30px;
    height: 40px;
    text-indent: -999em;
    z-index: 90;
    background: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png);
    background-repeat: repeat-x;
    width: 100%;
}



/* Navigation */

#mainMenuCheck {
	/* display none breaks this in some browsers, so just slide it out of view */
	position:absolute;
	left:-999em;
}

#mainMenu {
	position:relative; /* depth sort over h1 */
	background:#754 url(images/dots.png) top left;
	padding:0.40em 0.75em 0.05em;
	/* left margin adjusts for uneven menu width, change as needed */
	text-align:center;
}

#mainMenu li {
	list-style:none;
	display:inline;
}

#mainMenu ul:before,
#mainMenu ul:after,
#mainMenu:after,
#mainMenu a {
	color:#F0E8E0;
	text-shadow:
		0 0 2px #000,
		2px 2px 2px #000,
		2px 2px 3px #000;
}

#mainMenu a {
	display:inline-block;
	vertical-align:bottom;
	text-decoration:none;
	color:#F0E8E0;
	-webkit-transition:color 0.3s, text-shadow 0.3s;
	transition:color 0.3s, text-shadow 0.3s;
}

#mainMenu a.current {
	color:#87C6BC;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	color:#87C6BC;
}

#mainMenu a:after {
	display:inline-block;
	padding:0 0.1em 0 0.5em;
	color:#FFF;
}

#mainMenu .lastInSet a:after {
	display:none;
}

#mainMenu .setBreak {
	padding-right:8em;
}

#mainMenu a:after,
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
	content:"\2605";
	font-family:"arial unicode ms","dejavu sans",lastresort,sans-serif;
}

#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
	position:absolute;
	left:50%;
	width:3em;
	bottom: 1em;
}

#mainMenu:after {
	bottom:0.3em;
	font-size:150%;
	margin-left:-1.5em;
}

#mainMenu ul:before {
	margin-left:-3em;
}



/* Body Content */
div.body-content {
	padding: 50px 0;
	background-image: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Page_zpscom5uhou.png);
	font-family: Gudea;

}

div.center{
	width:100%;

}

/*
#heart-header {
    width: 50%;
    height:auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}



/*float left*/ .left { float: left; /*left in our text*/ margin: 20px; /*space around the image*/ 
}

/*float left*/ .right { float: right; margin: 20px; /*space around the image*/ 
}

@media screen and (max-width: 793px){
  .left{
  	margin:0;
  	width:100%;
    display: block;
    float: none;
  }
  .right{
  	margin:0 auto;
  	width:75%;
    display: block;
    float: none;
  }

}


}




/*
div.center h2 {
    margin: 0;
    font-size: 30px;
    font-size: 3.5vw;
    font-family: Gudea;
    font-weight: bold;
    position: absolute;
    top:60%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }




/* Thirds */


div.thirds {
	padding-bottom: 50px;
	text-align: center;
	font-family: Gudea;
}

div.button1 {
	width:90px;
	height:40px;
	margin-left: 38%;
}

div.one-third {
	width: 30%;
	float: left;
	margin-right: 5%;
	text-align: center;
	font-family: Gudea;
}

div.button2 {
	width:90px;
	height:40px;
	margin-left: 38%;
}

div.one-third-last {
	margin: 0;
	text-align: center;
	font-family: Gudea;

}

div.button3 {
	width:90px;
	height:40px;
	margin-left: 38%;
}

/*Level Two*/

div.four {
	padding-bottom: 50px;
	text-align: center;
	font-family: Gudea;
}

div.button4 {
	width:90px;
	height:40px;
	margin-left: 38%;
}

div.five {
	width: 30%;
	float: left;
	margin-right: 5%;
	text-align: center;
	font-family: Gudea;
}

div.button5 {
	width:90px;
	height:40px;
	margin-left: 38%;
}

div.six {
	margin: 0;
	text-align: center;
	font-family: Gudea;

}

div.button6 {
	width:90px;
	height:40px;
	margin-left: 38%;
}


.flex {
  padding: 4px;
  display: flex;
  flex-wrap: wrap;
}

.flex {
  padding: 4px;
  margin-right: 2%;
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 30%;
  margin-left:3%;
  margin-bottom: 20px;
  text-align: center;
}



/**/

h2 {
color:#4EB4AC;
font-family: Gudea;
font-size: 20px;

}



/* Main Column */
div.main {
	width: 100%;
	float: left;
	margin-top: -30px;
	margin-right: 5%;
	text-align: center;
	font-family: Gudea;
	position: relative;

}

/* Footer */
div.footer {
	background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
	margin-top: 30px;
	margin-bottom: 30px;
	color: #FFF;
	padding: 15px 0;
	text-align: center;
}


.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/*Mobile Nav*/

@media (min-width:900px) {

	.header2 {
		display: none;
	}

	.menu {
		display: none;
	}


}

@media (max-width:900px) {

	body {
	  z-index: 100; 
	  margin:;
	  font-family: font:bold 16px/18px arial,helvetica,sans-serif;
	  background-color: #f4f4f4;
	  

	}

	a {
	  color: #F8F4E6;
	  text-shadow:
		0 0 5px #000,
		5px 5px 5px #754;
	}

	.menu a:before,
	.menu ul:before,
	.menu ul:before {
		content:"\2605";

	}


	/* header */

	.header2 {
	  background-color:#6A4E39;
	  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
	  position: relative;
	  width: 100%;
	  z-index: 3;


	}

	.header2 ul {
	  margin: 0;
	  padding: 0;
	  list-style: none;
	  overflow: hidden;
	  background-image:none;

	}

	.header2 li a {
	  display: block;
	  padding: 20px 20px;
	  border-right: 1px solid #f4f4f4;
	  text-decoration: none;
	}

	.header2 li a:hover,
	.header2 .menu-btn:hover {
		background-color:#4EB4AC;
	  
	}

	.header2 .logo {
	  display: block;
	  float: left;
	  font-size: 15px;
	  padding: 10px 20px;
	  margin-top: 15px;
	  text-decoration: none;
	}

	/* menu */

	.header2 .menu {
	  clear: both;
	  max-height: 0;
	  transition: max-height .2s ease-out;
	 
	}

	/* menu icon */

	.header2 .menu-icon {
	  cursor: pointer;
	  display: inline-block;
	  float: right;
	  padding: 28px 20px;
	  position: relative;
	  user-select: none;
	}

	.header2 .menu-icon .navicon {
	  background: #F8F4E6;
	  display: block;
	  height: 2px;
	  position: relative;
	  transition: background .2s ease-out;
	  width: 18px;
	}

	.header2 .menu-icon .navicon:before,
	.header2 .menu-icon .navicon:after {
	  background: #F8F4E6;
	  content: '';
	  display: block;
	  height: 100%;
	  position: absolute;
	  transition: all .2s ease-out;
	  width: 100%;
	  margin-top: 7px;
	}

	.header2 .menu-icon .navicon:before {
	  top: 03px;
	}

	.header2 .menu-icon .navicon:after {
	  top: -2px;
	}

	/* menu btn */

	.header2 .menu-btn {
	  display: none;
	}

	.header2 .menu-btn:checked ~ .menu {
	  max-height: none;
	}

	.header2 .menu-btn:checked ~ .menu-icon .navicon {
	  background: transparent;
	}

	.header2 .menu-btn:checked ~ .menu-icon .navicon:before {
	  transform: rotate(-45deg);
	}

	.header2 .menu-btn:checked ~ .menu-icon .navicon:after {
	  transform: rotate(45deg);
	}

	.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
	.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
	  top: 0;
	}
}

/* 48em = 768px */


@media (max-width: 899px) {
  #mainMenu {
 	display: none;
  	justify-content: center;
  }


/* section */

.section {
  overflow: hidden;
  margin: auto;
  max-width: 1400px;
}

.section a {
  position: relative;
  float: left;
  width: 100%;
}

.section a img {
  width: 100%;
  display: block;
}

.section a span {
  color: #fff;
  position: absolute;
  left: 5%;
  bottom: 5%;
  font-size: 2em;
  text-shadow: 1px 1px 0 #000;
}

.section-split a span {
  display: none;
}

.section-split a:hover span {
  display: block;
}


/* 48em = 768px */

@media (min-width: 48em) {
  .section-split a {
    width: 50%;
  }
}

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
	<title>Sandmann Farm</title>
	
	<meta name="viewport" content="width=device-width">
	
	<!-- css -->
	<link rel="stylesheet" href="css/main.css">

	<link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)">




</head>
<body>

<!--Logo-->

<h1>
	<a href="/">
		
		<span>-</span>
		
	</a>
</h1>

<!--Sawtooth Pattern-->

<h2>
	<a href="/">
		
		<span>-</span>
		
	</a>
</h2>


<!-- Header -->
	<div class="header"><div class="section-inner">

	</div></div>
	
<!-- Navigation -->
<div id="container">
 

<input type="checkbox" id="mainMenuCheck">
<label for="mainMenuCheck"></label>

<div id="mainMenu">
	<ul>

		<li><a href="index.html" class="current">Home</a></li>
		<li><a href="about.html">About</a></li>
		<li><a href="whatwedo.html">What We Do</a></li>
		<li class="lastInSet setBreak"><a href="events.html">Events</a></li>
		
		<li><a href="successstories.html">Success Stories</a></li>
		<li><a href="contact.html">Contact</a></li>
		<li><a href="photos.html">Photos</a></li>
		<li class="lastInSet"><a href="/blog/">Blog</a></li>

	</ul>

</div>

<!--Mobile Navigation-->

<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
<header class="header2">
  <a href="/" class="logo">Navigation</a>
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
  <ul class="menu">
    <li><a href="#work">     Home</a></li>
    <li><a href="#about">     About</a></li>
    <li><a href="#careers">     What We Do</a></li>
    <li><a href="#about">     Events</a></li>
    <li><a href="#contact">     Success Stories</a></li>
    <li><a href="#contact">     Contact</a></li>
    <li><a href="#contact">     Photos</a></li>
    <li><a href="#contact">     Blog</a></li>
  </ul>
</header>
	
<!-- Body-Content -->
	<div class="body-content"><div class="section-inner">
			<div class="flex">
  <div class="item">
    <div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" style="width:100%;cursor:pointer"
    onclick="onClick(this)" class="w3-hover-opacity"></div>
    <div class="button3">
        
        </div>
  </div>
  <div class="item">
    <div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
    <div class="button3">
        
        </div>
  </div>
    <div class="item">
    <div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
    <div class="button3">
        
        </div>
  </div>
    <div class="item">
    <div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
    <div class="button3">
        
        </div>
  </div>
    <div class="item">
    <div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
    <div class="button3">
        
        </div>
  </div>
    <div class="item">
    <div><img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg"></div>
   
    </div>
  </div>	
  
</div>

<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
  <span class="w3-closebtn w3-hover-red w3-text-white w3-xxlarge w3-container w3-display-topright">&times;</span>
  <div class="w3-modal-content w3-animate-zoom">
    <img id="img01" style="width:100%">
  </div>
</div>

<script>
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
}
</script>

		
</div></div><!--/body-content-->


<!--Sawtooth Pattern Two-->

<h3>
	<a href="/">
		
		<span>-</span>
		
	</a>
</h3>

	
<!-- Footer -->
	<div class="footer"><div class="section-inner">
		
		<p>Footer text placed here.</p>
		
	</div></div>

</body>


</html>

Answer 1

你可以添加一些CSS：

for (a, r) in arabicToRomanArray where substring.hasPrefix(r) {
    arabic += a
    let index = substring.index(substring.startIndex, offsetBy: r.characters.count)
    substring = substring.substring(from: index)
    break
}

请参阅codepen上的示例：http://codepen.io/anon/pen/XjJAdw

Answer 2

让我们专注于究竟是什么模态。看看this。

基本上，在head标记内，添加此代码。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

在img标签上添加此代码。

<img data-toggle="modal" data-target="#myModal" src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg">

这是制作模态的方法。

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>      
</div>