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代码中的元素将被显示在最前面。