当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Link popping up on page?

问题描述:

<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

网友答案:

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');
});
网友答案:

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

网友答案:

it sounds like you want to do something like this

 <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>
网友答案:

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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: