jquery实现简单的弹出框

时间：2024-02-25 22:47:35

弹出框本身是一个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代码中的元素将被显示在最前面。

 

 

相关文章