起源

今天在添加微信联系方式的时候有了这个需求：需要点击按钮后弹出一个显示图片的对话框。

很简单的一个功能，我一开始想的是直接用alert()来弹出对话框然后显示图片，然后发现似乎这样并不能插入图片。 而且为了实现更酷炫的效果，最后我采用了以下方法:

思路

1.在页面中央直接摆放好图片，初始状态设为不显示；

2.放置一个覆盖整个页面的div，堆叠到图片下层，用于实现背景效果，初始状态也是不显示；

3.按钮的onclick事件来触发openWindow()，控制1、2的显示；

4.点击背景div触发closewindow事件，将显示状态还原。

页面代码

<img src="/wechat.png" alt="点击弹出二维码" onclick="openWindow()" />  # 这个当按钮

<div id="black_overlay" onclick="closeWindow()"></div>  # 这是遮罩层背景

<%= image_tag 'wechat_add.png', id: "wechat" %>  # 这是要弹出显示的图片

JS

function openWindow(){
  document.getElementById('wechat').style.display = 'block';
  document.getElementById('black_overlay').style.display='block';
}

function closeWindow(){
  document.getElementById('wechat').style.display = 'none';
  document.getElementById('black_overlay').style.display='none';
}

CSS

 #wechat{
   height: 400px;
   width: 450px;
   display: none;
   position: abosluted;
   top: 20%;
   left: 35%;
   z-index: 1002;
 }

 #black_overlay{
   display: none;
   position: absoluted;
   background-color: black;
   z-index: 1001;
   left: 0%;
   top: 0%;
   width: 100%;
   height: 100%;
   opacity: 0.8;
   -moz-opacity: 0.8;
   filter: alpha(opacity=80); 
 }

效果

最后实现的效果如下：