3300.me

get_create_element_size

last update: 2020/12/19
<!doctype html>
<title>title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

<style>
html, body, p {
margin: 0;
padding: 0;
}
body {
text-align: right;
}
.popupBtn {
position: relative;
top: 0;
left: 0;
margin-right: 10px;
padding: 8px;
background: #babbbc;
border-radius: 15px;
border: none;
color: #fff;
font-size: 12px;
line-height: 300px;
cursor: pointer;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.viewLayer {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation-name: fadeIn;
animation-duration: .3s;
}
.viewLayer.reverse {
animation-name: fadeOut;
animation-duration: .3s;
}
.viewLayerInner {
position: relative;
width: 100%;
height: 100%;
}
.overlay {
padding: 10px;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .7;
}
.popup {
margin: 0 auto;
padding: 10px;
position: absolute;
display: inline-block;
background: #fff;
border: #000 1px solid;
text-align: center;
box-sizing: border-box;
}
.popup span {
display: block;
margin-bottom: 20px;
padding-right: 40px;
text-align: left;
}
.closeBtn {
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 44px;
cursor: pointer;
}
.closeBtn:before {
position: relative;
top: 4px;
left: 24px;
content: "";
display: block;
width: 2px;
height: 32px;
background: #000;
transform: rotate(45deg);
}
.closeBtn:after {
position: relative;
top: -28px;
left: 24px;
content: "";
display: block;
width: 2px;
height: 32px;
background: #000;
transform: rotate(-45deg);
}

.sp .popup {
width: calc(100% - 20px);
}
.sp .popup img {
  width: 100%;
}
@media (orientation: landscape){
  .sp .popup img {
    width: 70%;
  }
}
</style>
</head>

<body>

<span class="popupBtn" data-key="l_01">？</span>
<span class="popupBtn" data-key="l_02">？</span>
<span class="popupBtn" data-key="l_03">？</span>
<span class="popupBtn" data-key="l_04">？</span>
<span class="popupBtn" data-key="l_05">？</span>


<div class="viewLayer">
<div class="viewLayerInner">
<div class="overlay">
</div>
<div class="popup">
<p class="closeBtn"></p>
</div>
</div>
</div>
</div>


<script>
(function (w, doc) {
  var raw = w.navigator.userAgent;
  const ua = {};
  var deviceType;

  // sp
  if (/iPhone/.test(raw) || /iPod/.test(raw)) {
    deviceType = 'sp';
    osType = 'ios';
  } else if (/Android/.test(raw) && /Mobile/.test(raw)) {
    deviceType = 'sp';
    osType = 'android';
  } else if (/Windows/.test(raw) && /Phone/.test(raw)) {
    deviceType = 'sp';
  } else if (/Firefox/.test(raw) && /Mobile/.test(raw)) {
    deviceType = 'sp';
  } else if (/BlackBerry/.test(raw) || /BB10/.test(raw)) {
    deviceType = 'sp';
  } else if (/Nokia/.test(raw)) {
    deviceType = 'sp';

  // tablet
  } else if (/iPad/.test(raw)) {
    deviceType = 'tablet';
    osType = 'ios';
  } else if (/Macintosh/.test(raw) && 'ontouchend' in doc) {
    deviceType = 'tablet';
    osType = 'ipados';
  } else if (/Android/.test(raw) && !/Mobile/.test(raw)) {
    deviceType = 'tablet';
    osType = 'android';
  } else if (/Windows/.test(raw) && /Touch/.test(raw) && !/Tablet PC/.test(raw)) {
    deviceType = 'tablet';
  } else if (/Firefox/.test(raw) && /Tablet/.test(raw)) {
    deviceType = 'tablet';
  } else if (/Playbook/.test(raw)) {
    deviceType = 'tablet';
  } else if (/Kindle/.test(raw) || /Silk/.test(raw)) {
    deviceType = 'tablet';

  // pc
  } else {
    deviceType = 'pc';
    if (/Mac/.test(raw)) {
      osType = 'mac';
    } else if (/Windows/.test(raw)) {
      osType = 'win';
    } else {
      osType = 'unknown';
    }
  }

  ua.isSp = deviceType === 'sp';

  if (ua.isSp) {
    var body = doc.querySelector('body');
    body.classList.add('sp');
  };
})(window, document);

var LAYER_DATA = {
  'l_01': [
    {
      'text': '*******************************
************************************
***************',
      'phot': '01.png',
    },
  ],
  'l_02': [
    {
      'text': '*******************************
************************************
***************',
      'phot': '02.png',
    },
  ],
  'l_03': [
    {
      'text': '*******************************
************************************
***************',
      'phot': '03.png',
    },
  ],
  'l_04': [
    {
      'text': '*******************************
************************************
***************',
      'phot': '04.png',
    },
  ],
  'l_05': [
    {
      'text': '*******************************
************************************
***************',
      'phot': '05_a.png',
    },
    {
      'text': '****

*******************************
************************************
***************',
      'phot': '05_b.png',
    },
  ],
};

(function(w, doc) {
  var viewLayer = doc.querySelector('.viewLayer');
  var popup = doc.querySelector('.popup');
  var popupBtns = doc.querySelectorAll('.popupBtn');
  var closeBtns = doc.querySelectorAll('.closeBtn, .overlay');
  var imgPathHead = 'imgs/';
  var duration = '100';

  var posSetting = function () {
    var scrollTop = w.pageYOffset;
    var windowW = w.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth;
    var windowH = w.innerHeight || doc.documentElement.clientHeight || doc.body.clientHeight;
    var popupW = popup.offsetWidth;
    var popupH = popup.offsetHeight;
    var posX = (windowW - popupW) / 2 ;
    var posY = (windowH - 20 < popupH) ? scrollTop + 10 : scrollTop + (windowH - popupH) / 2 ;
    popup.style.left = posX + 'px';
    popup.style.top = posY + 'px';
  };

  Object.values(popupBtns).forEach(function (value) {
    value.addEventListener('click', function (ev) {
      viewLayer.classList.remove('reverse');
      var key = ev.target.dataset.key;
      var item = LAYER_DATA[key];

      item.forEach(function (value, index) {
        var text = doc.createElement('span');
        text.innerHTML = value.text;
        popup.appendChild(text);

        var img = new Image();
        img.alt = '';
        img.src = imgPathHead + value.phot;
        popup.appendChild(img);
        var startPosSetting = function () {
          if (!item[index + 1]) {
            posSetting();
          }
        };
        img.onload = function () {
          startPosSetting();
        };
        img.onerror = function () {
          startPosSetting();
        }
      });

      viewLayer.style.display = 'block';
      ev.preventDefault();
    });
  });

  Object.values(closeBtns).forEach(function (value) {
    value.addEventListener('click', function (ev) {
      viewLayer.classList.add('reverse');
      w.setTimeout(function () {
        viewLayer.style.display = 'none';
        popup.querySelectorAll('span, img').forEach(function (el) {
          popup.removeChild(el);
        });
      }, 300);
    });
  });
})(window, document);
</script>


</body>
</html>

code_popup

sample

.