-2
モーダル画像ギャラリーをコーディングしようとしています。私は小さなJSを含むHTMLコードを見つけましたが、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 {
\t margin: 0;
\t padding: 0;
}
p {
\t margin: 0 0 1em 0;
\t font-size: 93%;
\t line-height: 1.5em;
}
body {
\t font-family: Helvetica, Arial, sans-serif;
\t padding: 0;
\t margin: 0;
\t background-image: url(http://oi68.tinypic.com/9tzv4n.jpg);
}
img {
\t max-width: 100%;
\t height: auto;
\t margin: 0 0 10px 0;
}
/* Section Inner */
div.section-inner {
\t max-width: 1100px;
\t padding: 0 25px;
\t margin: 0 auto;
}
/* Header */
div.header {
\t background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
\t margin-top:40px;
\t height: 30px;
\t background-color: #E9E9E9;
\t 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 {
\t /* display none breaks this in some browsers, so just slide it out of view */
\t position:absolute;
\t left:-999em;
}
#mainMenu {
\t position:relative; /* depth sort over h1 */
\t background:#754 url(images/dots.png) top left;
\t padding:0.40em 0.75em 0.05em;
\t /* left margin adjusts for uneven menu width, change as needed */
\t text-align:center;
}
#mainMenu li {
\t list-style:none;
\t display:inline;
}
#mainMenu ul:before,
#mainMenu ul:after,
#mainMenu:after,
#mainMenu a {
\t color:#F0E8E0;
\t text-shadow:
\t \t 0 0 2px #000,
\t \t 2px 2px 2px #000,
\t \t 2px 2px 3px #000;
}
#mainMenu a {
\t display:inline-block;
\t vertical-align:bottom;
\t text-decoration:none;
\t color:#F0E8E0;
\t -webkit-transition:color 0.3s, text-shadow 0.3s;
\t transition:color 0.3s, text-shadow 0.3s;
}
#mainMenu a.current {
\t color:#87C6BC;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
\t color:#87C6BC;
}
#mainMenu a:after {
\t display:inline-block;
\t padding:0 0.1em 0 0.5em;
\t color:#FFF;
}
#mainMenu .lastInSet a:after {
\t display:none;
}
#mainMenu .setBreak {
\t padding-right:8em;
}
#mainMenu a:after,
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
\t content:"\2605";
\t font-family:"arial unicode ms","dejavu sans",lastresort,sans-serif;
}
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
\t position:absolute;
\t left:50%;
\t width:3em;
\t bottom: 1em;
}
#mainMenu:after {
\t bottom:0.3em;
\t font-size:150%;
\t margin-left:-1.5em;
}
#mainMenu ul:before {
\t margin-left:-3em;
}
/* Body Content */
div.body-content {
\t padding: 50px 0;
\t background-image: url(http://i1377.photobucket.com/albums/ah69/danalavelle3/Page_zpscom5uhou.png);
\t font-family: Gudea;
}
div.center{
\t 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{
\t margin:0;
\t width:100%;
display: block;
float: none;
}
.right{
\t margin:0 auto;
\t 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 {
\t padding-bottom: 50px;
\t text-align: center;
\t font-family: Gudea;
}
div.button1 {
\t width:90px;
\t height:40px;
\t margin-left: 38%;
}
div.one-third {
\t width: 30%;
\t float: left;
\t margin-right: 5%;
\t text-align: center;
\t font-family: Gudea;
}
div.button2 {
\t width:90px;
\t height:40px;
\t margin-left: 38%;
}
div.one-third-last {
\t margin: 0;
\t text-align: center;
\t font-family: Gudea;
}
div.button3 {
\t width:90px;
\t height:40px;
\t margin-left: 38%;
}
/*Level Two*/
div.four {
\t padding-bottom: 50px;
\t text-align: center;
\t font-family: Gudea;
}
div.button4 {
\t width:90px;
\t height:40px;
\t margin-left: 38%;
}
div.five {
\t width: 30%;
\t float: left;
\t margin-right: 5%;
\t text-align: center;
\t font-family: Gudea;
}
div.button5 {
\t width:90px;
\t height:40px;
\t margin-left: 38%;
}
div.six {
\t margin: 0;
\t text-align: center;
\t font-family: Gudea;
}
div.button6 {
\t width:90px;
\t height:40px;
\t 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 {
\t width: 100%;
\t float: left;
\t margin-top: -30px;
\t margin-right: 5%;
\t text-align: center;
\t font-family: Gudea;
\t position: relative;
}
/* Footer */
div.footer {
\t background-image: url(http://oi67.tinypic.com/33dfi86.jpg);
\t margin-top: 30px;
\t margin-bottom: 30px;
\t color: #FFF;
\t padding: 15px 0;
\t text-align: center;
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/*Mobile Nav*/
@media (min-width:900px) {
\t .header2 {
\t \t display: none;
\t }
\t .menu {
\t \t display: none;
\t }
}
@media (max-width:900px) {
\t body {
\t z-index: 100;
\t margin:;
\t font-family: font:bold 16px/18px arial,helvetica,sans-serif;
\t background-color: #f4f4f4;
\t
\t }
\t a {
\t color: #F8F4E6;
\t text-shadow:
\t \t 0 0 5px #000,
\t \t 5px 5px 5px #754;
\t }
\t .menu a:before,
\t .menu ul:before,
\t .menu ul:before {
\t \t content:"\2605";
\t }
\t /* header */
\t .header2 {
\t background-color:#6A4E39;
\t box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
\t position: relative;
\t width: 100%;
\t z-index: 3;
\t }
\t .header2 ul {
\t margin: 0;
\t padding: 0;
\t list-style: none;
\t overflow: hidden;
\t background-image:none;
\t }
\t .header2 li a {
\t display: block;
\t padding: 20px 20px;
\t border-right: 1px solid #f4f4f4;
\t text-decoration: none;
\t }
\t .header2 li a:hover,
\t .header2 .menu-btn:hover {
\t \t background-color:#4EB4AC;
\t
\t }
\t .header2 .logo {
\t display: block;
\t float: left;
\t font-size: 15px;
\t padding: 10px 20px;
\t margin-top: 15px;
\t text-decoration: none;
\t }
\t /* menu */
\t .header2 .menu {
\t clear: both;
\t max-height: 0;
\t transition: max-height .2s ease-out;
\t
\t }
\t /* menu icon */
\t .header2 .menu-icon {
\t cursor: pointer;
\t display: inline-block;
\t float: right;
\t padding: 28px 20px;
\t position: relative;
\t user-select: none;
\t }
\t .header2 .menu-icon .navicon {
\t background: #F8F4E6;
\t display: block;
\t height: 2px;
\t position: relative;
\t transition: background .2s ease-out;
\t width: 18px;
\t }
\t .header2 .menu-icon .navicon:before,
\t .header2 .menu-icon .navicon:after {
\t background: #F8F4E6;
\t content: '';
\t display: block;
\t height: 100%;
\t position: absolute;
\t transition: all .2s ease-out;
\t width: 100%;
\t margin-top: 7px;
\t }
\t .header2 .menu-icon .navicon:before {
\t top: 03px;
\t }
\t .header2 .menu-icon .navicon:after {
\t top: -2px;
\t }
\t /* menu btn */
\t .header2 .menu-btn {
\t display: none;
\t }
\t .header2 .menu-btn:checked ~ .menu {
\t max-height: none;
\t }
\t .header2 .menu-btn:checked ~ .menu-icon .navicon {
\t background: transparent;
\t }
\t .header2 .menu-btn:checked ~ .menu-icon .navicon:before {
\t transform: rotate(-45deg);
\t }
\t .header2 .menu-btn:checked ~ .menu-icon .navicon:after {
\t transform: rotate(45deg);
\t }
\t .header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
\t .header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
\t top: 0;
\t }
}
/* 48em = 768px */
@media (max-width: 899px) {
#mainMenu {
\t display: none;
\t 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>
\t <meta charset="utf-8">
\t <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
\t
\t <title>Sandmann Farm</title>
\t
\t <meta name="viewport" content="width=device-width">
\t
\t <!-- css -->
\t <link rel="stylesheet" href="css/main.css">
\t <link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)">
</head>
<body>
<!--Logo-->
<h1>
\t <a href="/">
\t \t
\t \t <span>-</span>
\t \t
\t </a>
</h1>
<!--Sawtooth Pattern-->
<h2>
\t <a href="/">
\t \t
\t \t <span>-</span>
\t \t
\t </a>
</h2>
<!-- Header -->
\t <div class="header"><div class="section-inner">
\t </div></div>
\t
<!-- Navigation -->
<div id="container">
<input type="checkbox" id="mainMenuCheck">
<label for="mainMenuCheck"></label>
<div id="mainMenu">
\t <ul>
\t \t <li><a href="index.html" class="current">Home</a></li>
\t \t <li><a href="about.html">About</a></li>
\t \t <li><a href="whatwedo.html">What We Do</a></li>
\t \t <li class="lastInSet setBreak"><a href="events.html">Events</a></li>
\t \t
\t \t <li><a href="successstories.html">Success Stories</a></li>
\t \t <li><a href="contact.html">Contact</a></li>
\t \t <li><a href="photos.html">Photos</a></li>
\t \t <li class="lastInSet"><a href="/blog/">Blog</a></li>
\t </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>
\t
<!-- Body-Content -->
\t <div class="body-content"><div class="section-inner">
\t \t \t <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> \t
</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">×</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>
\t \t
</div></div><!--/body-content-->
<!--Sawtooth Pattern Two-->
<h3>
\t <a href="/">
\t \t
\t \t <span>-</span>
\t \t
\t </a>
</h3>
\t
<!-- Footer -->
\t <div class="footer"><div class="section-inner">
\t \t
\t \t <p>Footer text placed here.</p>
\t \t
\t </div></div>
</body>
</html>
質問は、最小限の作業実施例、全体ではなくスタイルのページを持っている必要があります。 –