CSS Lightbox 关闭时跳转到页面顶部

问题描述 投票：0回答：5

我正在开发我的单页作品集网站。由于害怕 JavaScript，我找到了一种在我的工作页面上使用 CSS 创建灯箱的方法。网站可以在这里查看：http://codepen.io/lauramortier/full/ChlcD/

如果您单击“工作”，它将带您进入我的作品集页面，如果您单击缩略图，它将打开一个带有全尺寸图像的灯箱。它也按照我想要的方式工作，直到您通过单击 X 关闭它，它会一直跳到网站顶部...... 知道如何让它保留在当前 div 上吗？ （即：#page3？）

这是 HTML：

<head>
  <title>Laura Mortier|Graphic Designer</title>
  <link rel="stylesheet" href="style.css">
</head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript/smoothscroll.js"></script>

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#home" class="smoothScroll">Home</a></li>
        <li><a href="#about" class="smoothScroll">About</a></li>
        <li><a href="#work" class="smoothScroll">Work</a></li>
        <li><a href="#contact" class="smoothScroll">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-----------------PAGES------------------>


  <!------Home------>

  <div id="page1">
    <a id="home"></a>
    <h1 id="home-text">Salut! My name is Laura Mortier. 
      <br>I am a designer who loves making<br>
          things look pretty.</h1>
  </div>


  <!------About------>

  <div id="page2">
    <a id="about"></a>
    <h1 id="about-title">About Me</h1>

      <img src="http://i870.photobucket.com/albums/ab270/frenchspy007/6de8148c-6f03-497e-ba24-60c37b45978e_zps13deddb4.jpg"/>  

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      <br>sed do eiusmod tempor incididunt ut labore et dolore<br> magna aliqua. Ut enim ad minim veniam, quis nostrud <br>exercitation ullamco laboris nisi ut aliquip ex ea commodo <br> consequat.<br> Duis aute irure dolor in reprehenderit in voluptate velit esse <br> cillum dolore eu fugiat nulla
      pariatur. <br> Excepteur sint occaecat cupidatat non proident, sunt 
      <br>in culpa qui officia deserunt mollit anim id est laborum.</p>

  </div>


  <!------Work------>

   <div id="page3">
     <a id="work"></a>
     <h1 id="work-title">Work</h1>
     <h2>Here are some of my recent works:</h2>
  <div class="portfolio">

<ul id="gallery">
    <li>

        <a class="lightbox" href="#image1">
        <img src="../Thumbnails/four element thumb.png"/>
        </a> 
        <div class="lightbox-target" id="image1">
        <img src="../Full-Size Images/four elements cans.png"/>
    <a class="lightbox-close" href="#"></a>
        </div>
    </li>   

    <li>

        <a class="lightbox" href="#image2">
        <img src="../Thumbnails/watchdogs-thumb.png"/>
        </a> 
        <div class="lightbox-target" id="image2">
        <img src="../Full-Size Images/watchdogs.png"/>
    <a class="lightbox-close" href="#"></a>
        </div>

    </li>


    <li>

        <a class="lightbox" href="#image3">
        <img src="../Thumbnails/happy mouth logo final.png">
        </a> 
        <div class="lightbox-target" id="image3">
        <img src="../Full-Size Images/happy mouth logo final.png"
    <a class="lightbox-close" href="#"></a>
        </div>

    </li>



    <li>

        <a class="lightbox" href="#image4">
        <img src='../Thumbnails/designer desk thumb.png'/>
        </a> 
        <div class="lightbox-target" id="image4">
        <img src="http://i870.photobucket.com/albums/ab270/frenchspy007/designerdesk_zps1eb2bab6.png"/>
    <a class="lightbox-close" href="#"></a>
        </div>

    </li>

    <li>

        <a class="lightbox" href="#image5">
        <img src="http://i870.photobucket.com/albums/ab270/frenchspy007/newMlogo_zpse9e2cd8f.png"/>
        </a> 
        <div class="lightbox-target" id="image5">
        <img src="http://i870.photobucket.com/albums/ab270/frenchspy007/d8340feb-cc71-420a-a58a-c9b454bb8732_zps28886966.png"/>
    <a class="lightbox-close" href="#"></a>
        </div>

    </li>


        <li>

        <a class="lightbox" href="#image6">
        <img src="../Thumbnails/paris my sweet-thumb"/>
        </a> 
        <div class="lightbox-target" id="image6">
        <img src="../Full-Size Images/paris my sweet.png"/>
    <a class="lightbox-close" href="#"></a>
        </div>

    </li>

        <li>

        <a class="lightbox" href="#image7">
        <img src="../Thumbnails/dark souls thumb.png"/>
        </a> 
        <div class="lightbox-target" id="image7">
        <img src="../Full-Size Images/dark souls.png"/>
    <a class="lightbox-close" href="#"></a>
        </div>

    </li>

        <li>

        <a class="lightbox" href="#image8">
        <img src="../Thumbnails/bioshock poster thumb copy.png">
        </a> 
        <div class="lightbox-target" id="image8">
        <img src="../Full-Size Images/bioshock poster.png"/>
    <a class="lightbox-close" href="#"></a>
        </div>

    </li>

</ul>

  <!------BEHANCE BUTTON------>


        <a href="http://www.behance.net/laura-mortier" target="_blank">
        <button id="behance"><h3 id="behance-text">See More on Behance</h3></button>
        </a>


  <!------Contact------>

  <div id="page4">
    <a id="contact"></a>
    <h1 id="contact-title">Get in touch!</h1> 
    <p id="contact-text">Wanna work with me or just wanna say hi?<br>
    Drop me a line, and I'll get back to you as<br>
soon as I can!</p>

    <form action="FormtoEmail.php" method="post">

    <label>Name</label>
    <input name="name" placeholder="Who are you?"><br>

    <label>Email</label>
    <input name="email" type="email" placeholder="What's your e-mail?"><br>

    <label>Message</label>
    <textarea name="message" placeholder="What's on your mind?"></textarea>

   <br> <input id="submit" name="submit" type="submit" value="Submit">

</form>

<!-------------CONTACT INFO--------------
  <div id="contact-info">
    <ul>
      <li>[email protected]</li><br>
      <li>262-359-0213</li>
    </ul>

  </div>
---------------------------------------->  

<a href="#home" class="smoothScroll"><button id="back-to-top" type="button"><h3 id="fshoo">FSHOO!</h3></button></a>

  </div>


</body>

<footer>
  <h3 id="footer-text">Laura Mortier &copy; All Rights Reserved</h3>
</footer>

和CSS

 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;
}

提前谢谢您！

html css lightbox
5个回答
1
投票

您只需将 

href="#"
替换为 
href="javascript:;"
即可。:

<a class="lightbox-close" href="javascript:;"></a>

它会留在你所在的地方。

1
投票

对我有用的一个 hacky 解决方案（在 Chrome 和 Edge 中）是链接到不存在的标签。像这样：

<a class="lightbox-close" href="#adsfasdfasfewf"></a>

我确信有更好的方法来做到这一点。

0
投票

使用此解决方法： 1）在

<a id="work"></a>
标签后创建一个锚标签，如下所示

<a name="work"></a>

2）将退出按钮的

href="#"
更改为
href="#work"
，这样就会再次跳转到工作

随处更改此设置 

<a class="lightbox-close" href="#work"></a>
0
投票

只需将关闭灯箱的链接上的 href 更改为 

href=#work"
而不是 
href="#"
，如下所示： 

<a class="lightbox-close" href="#work"></a>

不需要额外的 HTML，它与已经存在的 HTML 链接，如下所示：

<a id="work"></a>

您正在 CSS 中使用 :target 选择器，因此您应该对其进行更多研究，并且 了解将其用作 CSS 单击事件的概念。
一个很好的教程：目标可以在这里找到。
另一方面，您可以使用更少的 jquery 使页面滚动。
请参阅 This JSFiddle 了解此方法的示例。

0
投票

可能会导致跳到顶部：body {overflow-y:scroll; }

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.