javascript如何实现弹出层

本文小编为大家详细介绍“javascript如何实现弹出层”，内容详细，步骤清晰，细节处理妥当，希望这篇“javascript如何实现弹出层”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联公司服务项目包括平罗网站建设、平罗网站制作、平罗网页制作以及平罗网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，平罗网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到平罗省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

javascript实现弹出层的方法：1、创建一个HTML示例文件；2、将待显示的内容先隐藏，在触发点击条件后，将原本隐藏的内容显示出来，代码如“document.getElementById("open").onclick = function(e){...}”；3、提供遮罩层将原先的页面内容全部遮住即可。

使用JAVASCRIPT实现弹出层效果

设计

实现弹出层效果的思路非常简单：将待显示的内容先隐藏，在触发某种条件后（如点击按钮），将原本隐藏的内容显示出来。

实现




    Window对象
    


百度一下
打开弹出层
         
    这里是弹出层内容
    关闭弹出层



    var toast = document.getElementById("toast");
    document.getElementById("open").onclick = function(e){           
        toast.style.display = "block";
        toast.style.position = "fixed";
        var winWidth = window.innerWidth;
        var winHeight = window.innerHeight;
        var targetWidth = toast.offsetWidth;
        var targetHeight = toast.offsetHeight;
        toast.style.top = (winHeight - targetHeight) / 2 + "px";
        toast.style.left = (winWidth - targetWidth) / 2 + "px";
    }
    document.getElementById("close").onclick = function(e){               
        toast.style.display = "none";
    }

显示效果如下：

javascript如何实现弹出层

但是我们可以注意到，在弹出隐藏内容之后我们还是可以通过链接进入百度页面。为了防止这种情况的发生，我们可以提供遮罩层将原先的页面内容全部遮住。代码如下：




    Window对象
    


百度一下
打开弹出层
       
             
   　　这里是弹出层内容
    　 关闭弹出层

大橙子网站建设，新征程启航

javascript如何实现弹出层

其他资讯