链接弹出页面？

Question

<li><a href="#"><img src="img/example.jpg"></a></li>

So the above code is an image link. I'm trying to get it so when a user clicks on this image, instead of it leading them to another page for the content. It will bring up a box with the content in keeping everything on the same page? anyone know how you can do this?

Thanks

Answer 1

You could create a div that has an initial css value of visibility:hidden, then use javascript or jquery to change the value to 'visible' on a click event.

$('#yourpicturelink').on('click', function(){
  $('#hiddendiv').css('visibility', 'visible');
}

that could be expanded into more of a toggle function, but it should get you on the right path

Answer 2

听起来你想做这样的事情

 <li><a href="http:/blahblah.com" target="_blank" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=320,height=568');return false;"><img src="img/example.jpg"></a></li>

Answer 3

Something like this is what you want. This is very basic, and doesn't have logic for closing the box or styling for the box, but hopefully you get the idea.

Basically, you have a div with the full size image you want to show that is hidden by default using css. Then, in the visible document, you have an image that shows the box using jQuery when it is clicked.

 $(function() { $(".clickable").click(function() { $("#box").show(); }); }); 

 img.clickable { cursor: pointer; width: 10%; height:10%; } div#box { position: absolute; display: none; top: 0; left: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img class="clickable" src="http://i.imgur.com/LULHwuJ.jpg" /> <div id="box"> <img src="http://i.imgur.com/LULHwuJ.jpg" /> </div> 

Or, as an alternative, you can simply learn how to use libraries already coded up for you to accomplish this. Look at the comment by @Nillervision for some examples.

Answer 4

Misread, you could do something like this as well.

Hide the Content you want to display using some css.

On click add a class to slide the hidden content into view.

here's a JS fiddle

css

.contentBox {
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
color:#fff;
background: rgba(0,0,0, 0.7);
-moz-transform:translateX(-100%) translateY(0px);
-webkit-transform:translateX(-100%) translateY(0px);
-o-transform:translateX(-100%) translateY(0px);
-ms-transform:translateX(-100%) translateY(0px);
transform:translateX(-100%) translateY(0px);
-webkit-transition:200ms ease;
-moz-transition:200ms ease;
-ms-transition:200ms ease;
-o-transition:200ms ease;
 transition:200ms ease;
}

.slideLeft {
 -moz-transform:translateX(0px) translateY(0px);
-webkit-transform:translateX(0px) translateY(0px)!important;
-o-transform:translateX(0px) translateY(0px);
-ms-transform:translateX(0px) translateY(0px);
transform:translateX(0px) translateY(0px)!important;
}

markup

<img class="clickthis" src="http://i.imgur.com/LULHwuJ.jpg" />

<div class="contentBox">
   The Content
</div>

js

$('.clickthis').on('click', function(){
  $('.contentBox').addClass('slideLeft');
});