兼容web端和手机端的弹窗插件,（弹窗内可滑动，并可阻止下面的页面滑动）

来源：互联网发布：bestv安装第三方软件编辑：程序博客网时间：2024/06/01 08:07

前言

电脑端、手机端通用弹窗插件，原生js编写。允许弹窗内部滚动，同时，防止弹窗下面的页面滚动。

一、js内容

popup: {        isInit: false,        isOpen: false,        parseDom: function(str){            var div = document.createElement("div");            div.innerHTML = str;            return div.childNodes;        },        init: function(width, height){            var popHtml = "<div class='popup' style='width:100%;height:100%; z-index: 9999;-webkit-transition: all ease 700ms;" +                            "position: fixed;top:0;left: 0;background-color: rgba(0,0,0,0.8);display: none;'>"+                                "<div class='middle' style='display: table-cell;vertical-align: middle;text-align: center;'>"+                                    "<div class='inner' style='display: inline-block;'>"+                                        "<div class='content' style='width:"+ width + ";height:" + height + ";background-color:white;word-break: break-all;-webkit-overflow-scrolling:touch;box-sizing:border-box;color: black;padding:20px;position:relative;'></div>"+                                    "</div>"+                                "</div>"+                          "</div>";            document.body.appendChild(this.parseDom(popHtml)[0]);            this.isInit = true;        },/*width: 弹窗宽度  height：弹窗高度contentHtml：弹窗内容*/        toast: function(width, height, contentHtml){            if(!this.isInit){                this.init(width, height);            }            this.isOpen = true;            var content = document.querySelector(".popup .middle .inner .content");            content.innerHTML = contentHtml;            document.querySelector(".popup").style.display = "table";            var viewPortWidth = document.documentElement.clientWidth;            if(viewPortWidth > 600){                //web端，防止下部页面滑动                document.body.style.overflow = "hidden";            }else{                //手机端，防止下部页面滑动，其中，country_detail为页面最顶层的元素，包含除了弹窗以外的其他所有内容                document.querySelector(".country_detail").style.position = "fixed";            }        },        close: function(){            this.isOpen = false;            document.body.style.overflow = "scroll";  //允许web端弹窗下面页面滚动            document.querySelector(".country_detail").style.position = "relative"; //允许web端弹窗下面页面滚动            document.querySelector(".popup").style.display = "none";        },    }

二、使用方法

popup.toast("722px","424px",html); html为你要添加的页面片段，css方面，你在其中添加了什么，就对相应的内容添加样式文件，比如：html为<div class="center">ddd</div>, 则添加的样式为.popup .center{}

三、实际使用展示如下：

web端：

手机端：

阅读全文

0 0