JQ模态窗口自适应

最新推荐文章于 2021-11-08 15:38:10 发布

置顶 Mr_xiaoQiao

最新推荐文章于 2021-11-08 15:38:10 发布

阅读量1k

点赞数 1

分类专栏： H5 文章标签： html5 移动 html 优化

本文链接：https://blog.csdn.net/qq_39919114/article/details/78082987

版权

H5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

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()
  }

Mr_xiaoQiao

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQ模态窗口自适应

参数封装（传参即可），代码极简，需要的即可带走，代码还可以优化，望大家多多建议。pc/移动端都适配，话不多说上图上代码。html（部分）JQ模态窗口 $(function(){ //传入参数 var contentText = "你已经成功提交了领奖信息 5秒内页面自动跳转....";//传入内容c
复制链接

扫一扫