初探弹出层的实现原理

我不是女神ヾ 2022-12-06 05:28 113阅读 0赞

首先用几句话来描述一下实现过程，好有个思路嘛^^：（1）先创建一个div层将整个屏幕罩住（所谓的遮罩层），可设置该层的属性，例如透明度（2）在遮罩层内创建div来展示内容（这里暂时称为内容展示层），在该层就可以灵活的创建个人需要的HTML组件了。例如你在内容展示层中创建了一个iframe，嘿嘿，你就可以请求指定的URL并将其返回的内容呈现在这个iframe之中。

下面就赶紧来看看如何实现吧

1、先上HTML代码

<body>
          <div>body content</div>
          <a href="javascript:void('打开弹出层');" onclick="openDialog();">打开弹出层</a>
    </body>

2、上Javascript部分

<script>
                window.myLayers = {};
                myLayer = function(opts){
                    //默认参数
                    var params = {
                        width: 500,
                        height: 370,
                        title: '我的窗口',
                        btnWrapH: 37,
                        titleWrapH: 31,
                        opacity: 0,
                        mask: true,
                        okClick: function(){}
                    }
                    //设置参数
                    opts = opts ? opts : {};
                    this.mask = (opts.mask == true || opts.mask == false) ? opts.mask : params.mask;
                    this.okClick = opts.okClick ? opts.okClick : params.okClick;
                    this.url = opts.url ? opts.url : "";
                    this.content = opts.content ? opts.content : null;
                    this.width = opts.width ? opts.width : params.width;
                    this.height = opts.height ? opts.height : params.height;
                    this.title = opts.title ? opts.title : params.title;
                    this.btnWrapH = opts.btnWrapH ? opts.btnWrapH : params.btnWrapH;
                    this.titleWrapH = opts.titleWrapH ? opts.titleWrapH : params.titleWrapH;
                    this.opacity = opts.opacity ? opts.opacity : params.opacity;
                    this.id = opts.id ? opts.id : parseInt(Math.random()*10000); //设置ID
    
                    var _top = window;
                    while(_top && (_top.parent != _top.self) && _top.parent.frames.length == 0){
                        _top = _top.parent;
                    }
                
                    
                    this.left =_top.document.documentElement.clientWidth && _top.document.body.clientWidth/2 - this.width/2;
                    this.top = _top.document.documentElement.clientHeight && _top.document.body.clientHeight/2 - this.height/2;
                    
                    this.left = this.left < 0 ? 0 : this.left;
                    this.top = this.top < 0 ? 0 : this.top;
                    //保存，便于在方法之间引用
                    myLayers[this.id] = this;
                };
                //核心方法
                myLayer.prototype.open = function(){
                    //定义遮罩层
                    var _maskDiv = "<div id='_maskDiv_"+this.id+"' style='position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #ccc; margin: 0; opacity: "+this.opacity+"; filter: alpha(opacity="+(this.opacity*100)+");'></div>"
                    //按钮
                    var _wrapBtn = "<div style='height: "+this.btnWrapH+"px; width: 100%; background-color: #20B2AA; position: relative;'><a href='javascript:void(0);' onclick='myLayers[\""+this.id+"\"].cancelBtnClick(\""+this.id+"\");'  style='float: right; display: inline-block; margin-right:10px; color: green;background-color: white; padding: 1px 10px; height: 27px;  margin-top: "+((this.btnWrapH - 29)/2)+"px; line-height: 27px; text-decoration: none;'>关闭</a><a href='javascript:void(0);' onclick='myLayers[\""+this.id+"\"].okBtnClick(\""+this.id+"\");' style='float: right;  display: inline-block; margin-right: 10px; color: green; padding: 1px 10px; margin-top: "+((this.btnWrapH - 29)/2)+"px; height: 27px; line-height: 27px; background-color: white; text-decoration: none;'>确认</a></div>";
                    //iframe
                    var _iframe = "<iframe style='width: 100%; height: "+(this.height-(this.titleWrapH+10)-this.btnWrapH)+"px; background-color: white; overflow: auto; ' src='"+this.url+"'  frameborder='0'></iframe>";
                    //content属性优先
                    var _content = this.content ? this.content : _iframe;
                    //内容展示层
                    var _wrapIframe = "<div id='_wrapIframe_"+this.id+"' style='border: 1px solid #E0FFFF; position: absolute; left: "+this.left+"px; top: "+this.top+"px; margin: 0 auto; padding: 0; width: "+this.width+"px; height: "+this.height+"px; background-color: white;'><h3 style='position: relative; margin: 0; padding: 5px 0 5px 10px; height: 31px; line-height: 31px; background-color: #20B2AA; overflow: hidden;'><a style='height: "+this.titleWrapH+"px; line-height: "+this.titleWrapH+"px; float: right; top: 31px; margin-right: 20px; padding: 3px 10px; font-size: 17px;' href='javascript: void(0);' onclick='myLayers[\""+this.id+"\"].closeLayer(\""+this.id+"\");'>关闭</a><span style='overflow: hidden;'>"+this.title+"</span></h3><div style='width: 100%; height: "+(this.height-(this.titleWrapH+10)-this.btnWrapH)+"px;'>"+_content+"</div>"+_wrapBtn+"</div>";
                    
                    var body = window.document.body;
                    //是否显示遮罩层
                    if(this.mask == true){
                        body.innerHTML = body.innerHTML + _maskDiv;
                    }
                    
                    body.innerHTML = body.innerHTML + _wrapIframe;
                };
                //关闭
                myLayer.prototype.closeLayer = function(layerId){
                    var _w = document.getElementById("_wrapIframe_"+layerId);
                    _w.parentNode.removeChild(_w);
                    var _m = document.getElementById("_maskDiv_"+layerId);
                    _m && _m.parentNode.removeChild(_m);
                };
                //事件
                myLayer.prototype.okBtnClick = function(layerId){
                    myLayers[layerId].closeLayer(layerId);
                    myLayers[layerId].okClick();
                };
                
                myLayer.prototype.cancelBtnClick = function(layerId){
                    myLayers[layerId].closeLayer(layerId);
                };
                //调用打开弹出层
                function openDialog(){
                    var opts = {
                        opacity: 0.31,
                        title: '我的标题',
                        height: 430,
                        width: 560,
                        url: "layer.htm",
                        mask: true,
                        okClick: function(){
                            alert("我被执行了。OK,可以提交表单了。");
                        },
                        content: "<p style='color: red;'><a href='javascript:void(\"打开弹出层\");' onclick='openDialog();'>打开弹出层</a></p>"
                        
                    }
                    new myLayer(opts).open();
                }
                
            </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，113人围观）

还没有评论，来说两句吧...

相关阅读

相关一层弹出层、两层弹出层、三层弹出层、多层弹出层随便搞

最近因为一些比较扯的需求，在项目中需要用到多层弹出层，话不多说，先看一下效果：![在这里插入图片描述][20200213212407576.gif] 使用情景：第一层

素颜马尾好姑娘i/ 2023年07月05日 10:17/ 0 赞/ 74 阅读

相关初探弹出层的实现原理

首先用几句话来描述一下实现过程，好有个思路嘛^^：（1）先创建一个div层将整个屏幕罩住（所谓的遮罩层），可设置该层的属性，例如透明度（2）在遮罩层内创建div来展示内容（这里

我不是女神ヾ/ 2022年12月06日 05:28/ 0 赞/ 114 阅读

相关 layer 弹出层

使用方法：一、引入 <script type="text/javascript" src="js/jquery-1.8.0.min.js"></scrip

约定不等于承诺〃/ 2022年07月24日 07:03/ 0 赞/ 381 阅读

相关 jquery 弹出层

easyDialog在经过一段时间的使用后，对使用中碰到的一些问题进行了总结，最近花了点时间对原来的代码进行了重构和优化，并加入了一些新功能。原来的版本只是为了实现简单的弹出层

迷南。/ 2022年06月04日 04:29/ 0 赞/ 341 阅读

相关 layui弹出层闪退，layer弹出层闪退，layer弹出层坑

转载: http://www.mamicode.com/info-detail-1654730.html 今天用layui的弹出层插件，发现两奇怪的问题： 1、弹窗打开事

桃扇骨/ 2022年05月22日 04:30/ 1 赞/ 515 阅读

相关 javascript实现弹出层

弹出层和弹窗相似但是并不相同；弹窗和弹出层都是由用户触发的显示提示信息的弹出面板；但是弹窗只是显示一些信息，没有太多的复杂的交互事件；而弹层类似一个整个页面，可以实现页面的所有

骑猪看日落/ 2022年05月17日 11:07/ 0 赞/ 285 阅读

相关 layui——弹出层

$("createUser").click(function () { layer.open({ type:2

梦里梦外;/ 2022年05月12日 14:04/ 0 赞/ 434 阅读

相关 js弹出层

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゞ浴缸里的玫瑰/ 2022年04月11日 03:27/ 0 赞/ 380 阅读

相关 Layui的弹出层

1：先在HTML页面上放一个button按钮，给按钮ID，设置样式，按钮的作用就是弹出layui的open层： <button|type=“button”|id="O

逃离我推掉我的手/ 2022年01月22日 03:09/ 0 赞/ 888 阅读

相关使用layui实现弹出层

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

落日映苍穹つ/ 2021年09月28日 20:34/ 0 赞/ 714 阅读