jsp通过div实现覆盖，弹出新窗体

最新推荐文章于 2019-09-28 19:12:27 发布

javakeikei

最新推荐文章于 2019-09-28 19:12:27 发布

阅读量5.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： div jsp button filter function input

本文链接：https://blog.youkuaiyun.com/javakeikei/article/details/4549844

这篇博客介绍如何利用jsp和div实现一个点击按钮后弹出覆盖全屏的窗体效果。通过示例代码展示了如何设置div的样式、事件监听以及JavaScript函数来控制显示和关闭覆盖层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

-------------------------------------------------------------------一开始的页面----------------------

fdasfsdfadf

----------------------------------------------------------点击后出现的覆盖显示的内容-------------------

<div id="ShopConfirmLayer" style="position:absolute;top:300px;left:100px;z-index:900;border:1px red solid;width:500px;display:none;">

这是我点击后出现的内容

------------------------------------------------------------------覆盖的页面-------------------

<div id="webBgLayer" style="position:absolute;top:0px;left:0px;z-index:899;background-color:#ccc;height:100%;width:100%;display:none;-moz-opacity:0.9;filter:alpha(opacity=50);"></div>

-------------------这里;-moz-opacity:0.9;filter:alpha(opacity=50）很关键/*透明滤镜50%*/ }

ShopConfirmLayer.style.left=parseInt((document.documentElement.scrollWidth-ShopConfirmLayer.offsetWidth)/2)+document.documentElement.scrollLeft+"px";
ShopConfirmLayer.style.top=Math.abs(parseInt((document.documentElement.clientHeight-ShopConfirmLayer.offsetHeight)/2))+document.documentElement.scrollTop+"px"; //为内容层设置位置

     webBgLayer.style.display="";
     webBgLayer.style.height=document.documentElement.scrollHeight+"px"; //为覆盖层设置高度
    }
    function CloseShopConfirm(){
        var ShopConfirmLayer=document.getElementById("ShopConfirmLayer");
        var webBgLayer=document.getElementById("webBgLayer");
        ShopConfirmLayer.style.display="none";
        webBgLayer.style.display="none";
    }
</script>
</body>

代码还是比较简单的认真学习吧~~