jquery實現簡單的彈出框

彈出框本身是一個div，默認是隱藏不展示的，在需要彈框的時候使其顯示，並浮在當前頁面之上

  彈框樣式：
    .tanchuang {
        width: 100%;
        height: 100%;
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .5);
        z-index: 9999;
    }
    .tanchuang img {
        width: 380px;  //如果想要讓圖片與本身的比例自適應放大或者縮小，只指定一個寬或者高屬性即可，另一個屬性會自適應
        //height: 380px;
        position: absolute;
        top: 22%;
        left: 65%;
        margin-left: -100px;
        margin-top: -100px;
    }

 

彈框div
 <div class="tanchuang">
    <img id="picture" src="" alt="">
 </div>
form表單
 <form id="newUserPageAddForm" method="post" enctype="multipart/form-data">
 <div id="divSelect" class="searchCenter" width="100%">
 <input name="nuConfId" id="nuConfId" type="hidden" value="${newUserPageInfo.nuConfId}"/>
 <table class="searTabBg" width="100%">
      <tr>
        <td width="120" align="right"><font color="#FF0000">* </font>新人入戶頁圖片：</td>
        <td>
          <input name="nuFirstImage1" id="nuFirstImage1" type="file"
                                   style="width:200px;"/>
          <font color="#999999">大小限制（380*380）</font>
          <input type="button" value="上傳" id="button1" class="nuFirstImageButton"/>
          <input name="nuFirstImage" id="nuFirstImage" type="hidden"
                                   value="${newUserPageInfo.nuFirstPic}"/>
          <input type="button" value="預覽" class="preViewBtn" id="preViewImgBtn"/>
        </td>
      </tr>
</table>



點擊預覽彈出圖片div
 $("#preViewImgBtn").click(function () {
     var imgUrl=$("#nuFirstImage").val();
     $("#picture").attr("src",imgUrl);
     $(".tanchuang").toggle();
     return false;
  });
點擊頁面上任何一處隱藏div
  $("body").click(function(){
     $(".tanchuang").hide();
  });




注：

元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素

z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面）

一個元素可以有正數或負數的堆疊順序

有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。

注意： 如果兩個定位元素重疊，沒有指定z - index，最后定位在HTML代碼中的元素將被顯示在最前面。