JQ模态窗口自适应

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

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

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 = '
'+
                          '
'+
                              '
'+contentText+'
'+
                             '
'+
                             '
'+
                             ' '+
                            ' 
'+
                        '
';
        $("body").append(appends);
        // 获取传入的DIV 
        var $div_obj = $("#pop-div"); 
        // 计算机屏幕高度 
        var windowWidth = $(window).width(); 
        // 计算机屏幕长度 
        var windowHeight = $(window).height(); 
        // // 添加并显示遮罩层 
        $("
").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()
  }