Question

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

所以上面的代码是一个图像链接。我试图在用户点击此图片时获取它，而不是将其引导到内容的另一个页面。它会打开一个包含内容的盒子，以便将所有内容保存在同一页面上？谁知道你怎么能这样做？

由于

Answer 1

您可以创建一个div，其初始css值为visibility：hidden，然后使用javascript或jquery将值更改为click事件中的“visible”。

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

可以扩展为更多的切换功能，但它应该让你走上正确的道路

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

这样的东西就是你想要的。这是非常基本，并没有关闭盒子的盒子或样式的逻辑，但希望你明白了。

基本上，你有一个div，你想要显示的全尺寸图像默认使用css隐藏。然后，在可见文档中，您有一个图像，在单击它时使用jQuery显示该框。

$(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>

或者，作为替代方案，您可以简单地学习如何使用已编码的库来完成此任务。请看@Nillervision的评论。

Answer 4

误读，你也可以这样做。

隐藏您要使用的内容一些css。

点击后添加一个类，将隐藏的内容滑入视图。

这里是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;
}

标记

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

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

JS

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

链接弹出页面？

4 个答案: