layer彈出視窗的位置，随浏覽器的視窗的大小而改變位置

方案一：采用監聽resize實作，需要防抖，效果一般。

<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../jquery-2.1.1/jquery.min.js"></script>
  <script src="layer/layer.js"></script>
  <script src="layui/layui.js"></script>
  <link rel="stylesheet" href="layui/css/layui.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
  <style>
    #abcd {
      position: relative;
      padding: 20px;
      top: 50px;
      left: 50px;
      font-size: 20px;
    }
/* 
    @media screen and (min-width:1000px) {
      #layui-layer100001 {
        left: 200px;
        color: red;
      }
    }

    @media screen and (min-width:1400px) {
      #layui-layer100001 {
        left: 400px;
      }
    }

    @media screen and (min-width:2000px) {
      #layui-layer100001 {
        left: 600px;
      }
    } */
  </style>
</head>

<body>
  <!-- 點選按鈕，彈出視窗，高度不變，左右在某個位置，随視窗的改變而改變位置 -->
  <button id="abcd">abcd</button>

</body>
<script>
  //防抖函數
  function Debounce(fn, delay) {
    var ctx;
    var args;
    var timer = null;

    var later = function () {
      fn.apply(ctx, args);
      timer = null;
    };

    return function () {
      ctx = this;
      args = arguments;
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      timer = setTimeout(later, delay);
    };
  }

  function layerCss() {
    this.idxLayer = null;
  }
  layerCss.prototype = {
    init: function () {
      var self = this;
      self.event();
    },
    event: function () {
      var self = this;
      $(document).on("click", "#abcd", function () {
        var winWidth = $(window).width(),
          winHeight = $(window).height();
        self.idxLayer = layer.open({
          title: '線上調試'
          , content: '<div id="div1">配置各種參數，試試效果</div>'
          , offset: [winHeight - 200, winWidth / 3]  // 固定位置，不随視窗移動
          , type: 1
          , id: 'abc123'
        });
      });
      $(window).on('resize1', function () {
        // 由于抖動問題，不移動
        var winWidth = $(window).width();
        winWidth = parseInt(winWidth / 3) + "px";
        layer.style(self.idxLayer, {
          left: winWidth
        });
        console.log(winWidth);
      });
      // 防抖，不過效果還是不行
      $(window).on("resize", Debounce(function () {
        var winWidth = $(window).width();
        winWidth = parseInt(winWidth / 3) + "px";
        console.log(winWidth);
        layer.style(self.idxLayer, {
          left: winWidth
        });
        console.log(123);
      }, 500))
    },
  };

  var layerCssVar = new layerCss();
  layerCssVar.init();
</script>

</html>

方案二：css響應式處理

<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../jquery-2.1.1/jquery.min.js"></script>
  <script src="layer/layer.js"></script>
  <script src="layui/layui.js"></script>
  <link rel="stylesheet" href="layui/css/layui.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
  <style>
    #abcd {
      position: relative;
      padding: 20px;
      top: 50px;
      left: 50px;
      font-size: 20px;
    }
    #layui-layer100001 {
        left: 50px !important;
        color: red;
      }
    @media screen and (min-width:500px) {
      #layui-layer100001 {
        left: 150px !important;
        color: red;
      }
    }
    @media screen and (min-width:1000px) {
      #layui-layer100001 {
        left: 300px !important;
        color: red;
      }
    }

    @media screen and (min-width:1500px) {
      #layui-layer100001 {
        left: 600px !important;
      }
    }

    @media screen and (min-width:2000px) {
      #layui-layer100001 {
        left: 800px !important;
      }
    } 
  </style>
</head>

<body>
  <!-- 點選按鈕，彈出視窗，高度不變，左右在某個位置，随視窗的改變而改變位置 -->
  <button id="abcd">abcd</button>

</body>
<script>
  //防抖函數
  function Debounce(fn, delay) {
    var ctx;
    var args;
    var timer = null;

    var later = function () {
      fn.apply(ctx, args);
      timer = null;
    };

    return function () {
      ctx = this;
      args = arguments;
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      timer = setTimeout(later, delay);
    };
  }

  function layerCss() {
    this.idxLayer = null;
  }
  layerCss.prototype = {
    init: function () {
      var self = this;
      self.event();
    },
    event: function () {
      var self = this;
      $(document).on("click", "#abcd", function () {
        var winWidth = $(window).width(),
          winHeight = $(window).height();
        self.idxLayer = layer.open({
          title: '線上調試'
          , content: '<div id="div1">配置各種參數，試試效果</div>'
          , offset: [winHeight - 200, winWidth / 3]  // 固定位置，不随視窗移動
          , type: 1
          , id: 'abc123'
        });
      });
      
    },
  };

  var layerCssVar = new layerCss();
  layerCssVar.init();
</script>

</html>

方案三：layui的自動居中，offset隻設定高度，左右自動居中

<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../jquery-2.1.1/jquery.min.js"></script>
  <script src="layer/layer.js"></script>
  <script src="layui/layui.js"></script>
  <link rel="stylesheet" href="layui/css/layui.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
  <style>
    #abcd {
      position: relative;
      padding: 20px;
      top: 50px;
      left: 50px;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <!-- 點選按鈕，彈出視窗，高度不變，左右在某個位置，随視窗的改變而改變位置 -->
  <button id="abcd">abcd</button>

</body>
<script>
  //防抖函數
  function Debounce(fn, delay) {
    var ctx;
    var args;
    var timer = null;

    var later = function () {
      fn.apply(ctx, args);
      timer = null;
    };

    return function () {
      ctx = this;
      args = arguments;
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      timer = setTimeout(later, delay);
    };
  }

  function layerCss() {
    this.idxLayer = null;
  }
  layerCss.prototype = {
    init: function () {
      var self = this;
      self.event();
    },
    event: function () {
      var self = this;
      $(document).on("click", "#abcd", function () {
        var winWidth = $(window).width(),
          winHeight = $(window).height();
        self.idxLayer = layer.open({
          title: '線上調試'
          , content: '<div id="div1">配置各種參數，試試效果</div>'
          , offset: [winHeight - 200] 
          , type: 1
          , id: 'abc123'
        });
      });
    },
  };
  var layerCssVar = new layerCss();
  layerCssVar.init();
</script>

</html>

layer彈出視窗的位置，随浏覽器的視窗的大小而改變位置

繼續閱讀

layer.open打開的頁面關閉時，父頁面重新整理的方法

layer open 彈出層子頁面關閉給父頁面設定屬性

解決使用layer iframe 沒有出現滾動條導緻頁面顯示不全

layui中修改頁面layer.open type = 2 頁面彈出層子頁面、父頁面傳值

layui 導出表格csv過長字段出現科學計數法問題

layui-彈出層

layui-簡單的登入注冊界面

layui-資料表格

layui-下拉選擇框

基于layui的架構模版，采用子產品化設計，接口分離，元件化思想1. 準備工作概述代碼結構代碼講解

layer彈出層不居中解決方案（轉）

解決Layui導出長數字變科學計數

layui彈出框confirm自定義樣式

Layui實作一個簡單的布局

layui table關閉分頁，隻顯示預設的前10條資料的問題解決方法

layui多任務上傳添加進度條