简体   繁体   English

单击“查看”按钮时,在弹出/新选项卡/窗口中显示图像

[英]Display images in a popup/ new tab/window when View button is clicked

Here the code I have tried. 这里是我试过的代码。 *val is a variable and it theFunction() will be called for multiple images. * val是一个变量,它将为多个图像调用theFunction()

<th style="color:#cc0000">Fail</th><td><a href="javascript:void();" id="img8" class="hide\  value="show my Image" onclick="return theFunction(8);">view</a>

<img id="myimage8" class="hide" src="image1.jpg"  alt="check image path" width="100px" height="100px">

<img id="myimage_8" class="hide" src="image2.jpg" alt="check image path" width="100px" height="100px"></td>
<script>
function theFunction(val) {
  obj0=document.getElementById('img'.concat(val)); 
  obj1 = document.getElementById('myimage'.concat(val));
  obj2 = document.getElementById('myimage_'.concat(+val));
  obj1.className=='hide'? (obj1.className='',this.value='hide my Image'): (obj1.className='hide',this.value='show my Image'); 
  obj2.className=='hide'? (obj2.className='',this.value='hide my Image'): (obj2.className='hide',this.value='show my Image');
  return true;
}
window.addEventListener? window.addEventListener('load',theFunction,false): window.attachEvent('onload',theFunction); 
</script>

The actual result: 实际结果:

the images are displayed just after 'view' button when clicked 单击“视图”按钮后显示图像

Expected: 预期:

the images are to be displayed in a popup window. 图像将显示在弹出窗口中。

I tried, target="_blank" but it is not working. 我试过了, target="_blank"但它没有用。 Someone suggested to use windows.open() , but I don't know how to call it. 有人建议使用windows.open() ,但我不知道如何调用它。 Can someone help me out to resolve this one? 有人可以帮我解决这个问题吗?

You can use window.open to open a new URL. 您可以使用window.open打开新URL。 If your image is available via a URL that is accessible to consumers, you can just do: 如果您的图像可通过消费者可访问的URL获得,您可以执行以下操作:

window.open(image-url)

When a user clicks it, it will open your image on a new window 当用户点击它时,它将在新窗口中打开您的图像

There is one more better option though. 还有一个更好的选择。 I suggest you display the image in a popup without any redirections. 我建议您在弹出窗口中显示图像而不进行任何重定向。 You can easily use bootstrap model popup for that. 您可以轻松地使用bootstrap模型弹出窗口。 See this for reference. 请参阅参考。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM