JQ模态窗口自适应

来源：互联网发布：如何防止成为备胎知乎编辑：程序博客网时间：2024/05/22 15:31

参数封装（传参即可），代码极简，需要的即可带走，代码还可以优化，望大家多多建议。

pc/移动端都适配，话不多说上图上代码。

html（部分）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JQ模态窗口</title><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><script type="text/javascript" src="jquery-1.11.3.min.js"></script><script src="index.js"></script></head><body>      <input type="button" value="打开模态窗口" class="botn" style="cursor: pointer;" /></body> <script>    $(function(){       //传入参数          var contentText = "你已经成功提交了领奖信息<br/> <span>5</span>秒内页面自动跳转....";//传入内容content部分          var cancel = "取消";//按键名字自定义，如果不要按钮传入空值("")即可。          var confirm = "确认";//按键名字自定义，如果不要按钮传入空值("")即可。          popupDiv('.botn',contentText,cancel,confirm);//方法传入值popupDiv[0]是点击触发按钮，后参接上即可。    })  </script> </html>

css（部分）

  .pop-box {     z-index: 9999999;    margin-bottom: 3px;     display: none;     position: absolute;     background: #ffbc53;     border: 1px solid #ffbc53;     border-radius: 1rem;    box-sizing: border-box;    padding:0.134rem;  }       #bg {     width: 100%;     height: 100%;     position: absolute;     top: 0;     left: 0;     z-index: 1001;      background-color:#322e28;    -moz-opacity: 0.5;     opacity: .50;     filter: alpha(opacity = 50);   }   .contentText{    width: 100%;    overflow: hidden;    padding:20% 0px;    text-align: center;    font-size: 16px;    color:#ad0814;  }  #buttonPanel{    padding-bottom:20px;  }  #cancel{    width: 30%;    padding: 2%;    font-size: 16px;    margin-right: 30px;    background: #fe5315;    color: #fff;    border: none;    border-radius: 5px;    outline: none;  }    #confirm{    width: 30%;    padding: 2%;    font-size: 16px;    background: #fe5315;    color: #fff;    border: none;    border-radius: 5px;    outline: none;  }

js（部分）

  function popupDiv(botn,contentText,cancel,confirm) {       //模态窗口的点击      $("body").on("click",botn,function(){        //模态窗口的内容        var appends = '<div id="pop-div" style="overflow: hidden;" class="pop-box">'+                          '<div class="pop-box-body">'+                              '<p class="contentText">'+contentText+'</p>'+                             '</div>'+                             '<div id="buttonPanel" style="text-align: center">'+                             ' <input type="button" value="'+cancel+'" id="cancel"'+                             ' /><input type="button" value="'+confirm+'" id="confirm" />'+                            ' </div>'+                        '</div>';        $("body").append(appends);        // 获取传入的DIV         var $div_obj = $("#pop-div");         // 计算机屏幕高度         var windowWidth = $(window).width();         // 计算机屏幕长度         var windowHeight = $(window).height();         // // 添加并显示遮罩层         $("<div id='bg'></div>").width(windowWidth * 0.99)             .height(windowHeight * 0.99).click(function() {               //hideDiv(div_id);             }).appendTo("body");         // 显示弹出的DIV         $div_obj.css({           "position" : "absloute" ,          "display" : "block",          "left":"0",          "right":"0",          "margin":"auto"        });        //取消         $(".pop-box").on("click","#cancel",function(){          hideDiv("pop-div");         });        //确认         $(".pop-box").on("click","#confirm",function(){          alert("可做跳转");         });        // 取得传入DIV的高度         var popupHeight = $div_obj.height();        // 取得传入DIV的长度         var popupWidth = $div_obj.width();         //盒子居中显示       $(".pop-box").css({            "width":windowWidth-windowWidth*0.2+"px",            "top":windowHeight/2-popupHeight/2           })      //bottom部分排版判断      if(cancel==""&&confirm==""){        $("#buttonPanel").hide();      }      else if(cancel==""){        $("#cancel").hide();        $("#confirm").css({          "width":"60%",          "text-align":"center"        });      }      else if(confirm==""){        $("#confirm").hide();        $("#cancel").css({          "width":"60%",          "text-align":"center",          "margin-right":"0px"        });      }       });  }   /*隐藏弹出DIV*/   function hideDiv(div_id) {    $("#bg").remove();     $("#" + div_id).remove()  }

阅读全文

1 0