javascript - 如何用 js 实现弹出小窗口预览图片？

问题描述

问 题

我在 jsp 页面有一个图片，下面有预览按钮，我想实现点击预览在浏览器弹出模态框来查看图片，因为不想建新的页面所以不想用 window.open() 的方法。有没有简单粗暴的方法来实现？

解决方案

我最后采用的方法，创建了一个简单的 Lightbox：

[html]
// 预览选项
<div class="pull-right">
    <a id="preBack" style="cursor: pointer" 
    onclick="openModal();">预览</a>
</div>
// 写好模态框
<div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="modal-content">
        <img src="图片路径" style="width: 100%">
    </div>
</div>

[css]
/* The Modal (background) */
.modal {
  display: none;
  margin-top:5%;
  margin-left:7%;
  z-index: 1;
  padding-top: 6%;
  left: 0;
  top: 0;
  width: 40%;
  height:60%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 80%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

[JavaScript]
    function openModal() {
    document.getElementById('myModal').style.display = "block";
}

function closeModal() {
    document.getElementById('myModal').style.display = "none";
}

这篇关于javascript - 如何用 js 实现弹出小窗口预览图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！