CSS Лайтбокс переходит в начало страницы при закрытии

Я работаю над сайтом для портфолио на одной странице. Будучи в ужасе от JavaScript, я нашел способ создать лайтбокс с помощью CSS на моей рабочей странице. Сайт можно посмотреть здесь: http://codepen.io/lauramortier/full/ChlcD/

Если вы нажмете "Работа", он перенесет вас на мою страницу портфолио, и если вы нажмете на миниатюру, она откроет лайтбокс с полноразмерным изображением. Он работает так же, как я тоже хочу, пока вы не закроете его, щелкнув X, и он прыгнет полностью в верхнюю часть сайта... Любая идея, как я могу заставить его оставаться в текущем div? (т.е.: # page3?)

Вот HTML:

<title>Laura Mortier|Graphic Designer</title> <header> <nav> <ul> <li><a href="#home" target="_blank">Home</a></li> <li><a href="#about" target="_blank">About</a></li> <li><a href="#work" target="_blank">Work</a></li> <li><a href="#contact" target="_blank">Contact</a></li> </ul> </nav> </header> <!-----------------PAGES------------------> <!------Home------> <div id="page1"> <h2>Salut! My name is Laura Mortier. I am a designer who loves making things look pretty.</h2> </div> <!------About------> <div id="page2"> <h2>About Me</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <!------Work------> <div id="page3"><code>&lt;h2&gt;Work&lt;/h2&gt; &lt;h2&gt;Here are some of my recent works:&lt;/h2&gt;</code><div><code>&lt;ul id="gallery"&gt; &lt;li&gt; &lt;a href="#image1" target="_blank"&gt; &lt;/a&gt; &lt;div id="image1"&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#image2" target="_blank"&gt; &lt;/a&gt; &lt;div id="image2"&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#image3" target="_blank"&gt; &lt;/a&gt; &lt;div id="image3"&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#image4" target="_blank"&gt; &lt;/a&gt; &lt;div id="image4"&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#image5" target="_blank"&gt; &lt;/a&gt; &lt;div id="image5"&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#image6" target="_blank"&gt; &lt;/a&gt; &lt;div id="image6"&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#image7" target="_blank"&gt; &lt;/a&gt; &lt;div id="image7"&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#image8" target="_blank"&gt; &lt;/a&gt; &lt;div id="image8"&gt; &lt;/div&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;!------BEHANCE BUTTON------&gt; &lt;a href="http://www.behance.net/laura-mortier" target="_blank"&gt; &lt;button id="behance"&gt;&lt;h3 id="behance-text"&gt;See More on Behance&lt;/h3&gt;&lt;/button&gt; &lt;/a&gt; &lt;!------Contact------&gt; &lt;div id="page4"&gt; &lt;h2&gt;Get in touch!&lt;/h2&gt; &lt;p id="contact-text"&gt;Wanna work with me or just wanna say hi? Drop me a line, and I'll get back to you as
soon as I can!&lt;/p&gt; &lt;form action="FormtoEmail.php" method="post"&gt; &lt;label&gt;Name&lt;/label&gt; &lt;label&gt;Email&lt;/label&gt; &lt;label&gt;Message&lt;/label&gt;
&lt;/form&gt;
&lt;!-------------CONTACT INFO-------------- &lt;div id="contact-info"&gt; &lt;ul&gt; &lt;li&gt;[removed_email]&lt;/li&gt;&lt;br&gt; &lt;li&gt;262-359-0213&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;
----------------------------------------&gt;
&lt;a href="#home" target="_blank"&gt;&lt;button id="back-to-top" type="button"&gt;&lt;h3 id="fshoo"&gt;FSHOO!&lt;/h3&gt;&lt;/button&gt;&lt;/a&gt; &lt;/div&gt;
&lt;footer&gt; &lt;h3 id="footer-text"&gt;Laura Mortier © All Rights Reserved&lt;/h3&gt;
&lt;/footer&gt;</code> <p> и CSS</p> <pre class="prettyprint linenums"> body{ width:960px; margin:0 auto; display:block; background-color:#34495e;
}
/*********Navigation***********/
header{ display:block; background-color:#34495E; height:60px; position:fixed; width:960px; top:0px;
}
header ul{ margin:0; padding:0; float:right; margin-top:15px;
}
li{ list-style:none; display:inline; color:white; font-family:helvetica; font-weight:bold; font-size: 24px; padding: 20px;
}
a:hover{ color: #3498db;
}
a{ color:white; text-decoration:none;
}
/*********HOME PAGE***********/
#page1{ margin:0; height:900px; background-color:#2ecc71; border-radius:10px;
}
#home-text{ font-family:helvetica; font-size:50px; color:white; padding-left:75px; padding-top:100px;
}
/*********ABOUT PAGE***********/
#page2{ height:700px; background-color:#65C6BB; border-radius:10px; margin-top:20px;
}
#about-title{ font-family:helvetica; color:white; padding-left:40px; padding-top:20px; padding-bottom:40px;
}
p{ font-family:helvetica; text-align:left; color:white; padding-left:100px; padding-top:20px;
}
img{ float:top; display:block; margin-left:175px; padding:0; border-radius:100%; border: 5px solid white;
}
/*********WORK PAGE***********/
/**************GALLERY LIGHTBOX******************/
/*Eliminates padding, centers the thumbnail */
#page3{ height:675px; background-color:lightcoral; border-radius:10px; margin-bottom:20px;
}
#work-title{ font-family:helvetica; color:white; padding-left:40px; padding-top:20px;
}
h2{ color:white; font-family:helvetica; padding-left:40px; font-weight:normal; font-size:24px;
}
.portfolio{ height:400px; margin:0 auto; }
#gallery li{ display:inline-block; margin:5px; clear:both; }
#behance{ background-color:lightcoral; border-radius:10px; color:white; border: 2px white solid; height:60px; width:200px; font-family:Arial, Helvetica, sans-serif; font-size:18px; float:bottom; margin-left:350px; margin-bottom:20px; }
#behance:hover{ color:white; border: dashed 2px white; }
#behance-text{ font-weight:normal; padding:0; margin:0; }
/*******************LIGHTBOX*******************/
/*******************LIGHTBOX*******************/
/* Styles the thumbnail */
a.lightbox img {
height: 150px;
width:150px;
border: 3px solid white;
border-radius:0px;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: 5px;
}
/* Styles the lightbox, removes it from sight and adds the fade-in transition */
.lightbox-target {
position: fixed;
top: 0;
left:0;
width: 100%;
background: rgba(0,0,0,.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}
/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
.lightbox-target img {
margin: auto;
position: fixed;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
border-radius:0px;
}
/* Styles the close link, adds the slide down transition */
a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: fixed;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}
.lightbox-target:target a.lightbox-close {
top: 0px;
}
/*********CONTACT PAGE***********/
#page4{ background-color:steelblue; height:700px; border-radius:10px; margin-bottom:10px; margin-top:30px;
}
#contact-title{ font-family:helvetica; color:white; padding-left:40px; padding-top:20px;
}
#contact-text{ color:white; font-size:18px; font-family:helvetica; padding-left:40px; font-weight:normal;
}
#submit{ margin-top:20px; }
/*********CONTACT FORM***********/
form{ padding-left:40px;
}
label{ display:block; margin-top:20px; letter-spacing:2px; font-family:helvetica; color:white; font-size:18px;
}
input, textarea { width:400px; height:27px; background:#efefef; border:1px solid #dedede; padding:10px; margin-top:3px; font-family:helvetica; font-size:0.9em; color:#3a3a3a;
}
input, textarea { width:400px; height:27px; background:#efefef; border:1px solid #dedede; padding:10px; margin-top:3px; font-size:0.9em; color:#3a3a3a; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
}
textarea { height:213px; background:url(images/textarea-bg.jpg) right no-repeat #efefef;
}
input:focus, textarea:focus { border:1px solid #97d6eb;
}
#submit{ background-color:steelblue; font-family:helvetica; font-size:18px; color:white; border: 2px solid white; height:30px; width:130px; padding:0;
}
#submit:hover{ background-color:lightcoral;
}
#contact-info{ float:right; color:white; display:block; font-family:helvetica; font-size:16px;
}
/*********BACK TO TOP BUTTON***********/
#back-to-top{ float:right; padding-bottom:20px; padding-right:30px;
}
#back-to-top{ font-family:helvetica; color:white; font-size:16px; font-weight:bold; background-color:steelblue; border: 2px solid white; border-radius:10px; height:30px; width:150px; margin-right:50px; text-align:center;
}
#fshoo{ margin-left:25px; margin-top:20px; }
#back-to-top:hover{ border:dashed 2px white;
}
/*********FOOTER***********/
footer{ background-color:#34495E; height:60px; border-radius:10px; margin-top:0px;
}
#footer-text{ font-family:helvetica; color:white; font-size:18px; font-weight: normal; padding-top:10px; padding-left:25px;
}

Заранее спасибо!

3 ответа

Вы можете просто заменить href="#" на href="javascript:;" .:

Он останется там, где вы есть.


Просто измените href на ссылки, которые закрывают лайтбокс, на href=#work" вместо href="#" как в:

Никакой дополнительный HTML не нужен, он связан с уже существующим:

Вы используете селектор: целевого селектора в своем CSS, чтобы изучить его больше и понять концепцию использования его как события кликов CSS. Хороший учебник для: target можно найти здесь. С другой стороны, вы можете сделать прокрутку страницы, используя намного меньшее количество jquery. См. Этот JSFiddle для примера этого метода.


Используйте этот обходной путь: 1) Создайте тег привязки после тега как это

2) Измените href="#" кнопки выхода на href="#work", чтобы он снова перешел на работу

Измените это везде

licensed under cc by-sa 3.0 with attribution.