javascript如何实现弹出层

阅读：1284 来源：乙速云作者：代码code

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对象
    


百度一下
打开弹出层
       
             
   　　这里是弹出层内容
    　 关闭弹出层




    var toast = document.getElementById("toast");
    var cover = document.getElementById("cover");
    document.getElementById("open").onclick = function(e){           
        cover.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){               
        cover.style.display = "none";
    }

这是再次测试下效果，如下图：

javascript如何实现弹出层

分享到：

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们： hlamps#outlook.com （#换成@）。

上一篇： es6中的class有静态属性吗

下一篇： Composer怎么安装使用

你可能感兴趣