popup

by uiwwnw

HTML

<button class="eventCall">lorem</button>
<div class="fpPopup" id="reservationGuide">
  <!-- id는 호출 용도로만 사용 -->
  <div class="fpPosition">
    <div class="fpHeader">
      <h2 class="fpTitle">lorem</h2>
      <a class="fpCloseBtn" href="#">팝업창 닫기</a>
    </div>
    <div class="fpContents">
      <div class="reservationGuide">
        <!-- 실제 내용 영역 -->
        <h3 class="title">Lorem ipsum dolor sit.</h3>
        <div class="textArea">
          Lorem ipsum dolor sit.
          <br> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum!
          <br>
          <br>
          <p class="warn">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto voluptatem perspiciatis nihil quas maiores atque temporibus fugit, velit expedita nesciunt ipsa sapiente error, aut laborum in quam! Perferendis tempore, beatae accusantium
            magni temporibus mollitia sunt nesciunt omnis dolorem provident nisi.
            <br>
        </div>
      </div>
    </div>
    <div class="fpFooter">
      <button class="fpCancel">lorem</button>
      <button class="fpConfirm">lorem</button>
    </div>
  </div>
</div>

SCSS

//_popup.scss
$popupPadding: 20px;
$headerHeight: 50px;
$footerHeight: 70px;
$popupBorderColor: #333;
@function color-shade($color, $amount: 8%) {
  $lightness: lightness($color); //밝은지 체크
  $shade: #fff; //어두운색이라면 하얀색으로,
  @if ($lightness > 50) {
    //밝은색이라면
    $shade: #000; //어두운색으로 아래에서 믹싱한 컬러값을 리턴합니다.
  }
  @return mix($shade, $color, $amount);
}

@mixin fpPopup($class, $width: auto, $height: auto, $min-width: auto, $min-height: auto, $max-width: auto, $max-height: auto, $contentsBottomPadding: 0) {
  .fpPopup {
    .fpContents {
      .#{$class} {
        width: $width;
        @if ($min-width !=auto) {
          min-width: $min-width;
        }
        @if ($max-width !=auto) {
          max-width: $max-width;
        }
        height: $height;
        @if ($min-height !=auto) {
          min-height: $min-height;
        }
        @if ($max-height !=auto) {
          max-height: $max-height;
        }
        @if ($contentsBottomPadding !=0) {
          &:after {
            display: block;
            padding-bottom: $contentsBottomPadding;
            content: "";
          }
        }
        @content;
      }
    }
  }
}

$fpPopupImport: false;
@if($fpPopupImport==false) {
  .fpPopup {
    z-index: 1000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    padding: $popupPadding;
    font-size: 0;
    white-space: nowrap;
    text-align: center;
    &.hasHeader {
      .fpPosition {
        &:before {
          top: -$headerHeight;
        }
      }
    }
    &.hasFooter {
      .fpPosition {
        &:before {
          bottom: -$footerHeight;
        }
      }
    }
    &.open {
      display: block;
    }
    &:before {
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      content: "";
    }
    &::selection {
      background: 0;
    }
    .fpPosition {
      z-index: 2;
      position: relative;
      display: inline-block;
      max-width: 100%;
      min-width: 320px;
 ...

JavaScript

var fpPopup = function (e) {
  var _this = this;
  var ctr = {};
  ctr.bool = false;
  ctr.css = {
    padding: 20
  };
  ctr.el = document.getElementById(e);
  ctr.header = ctr.el.querySelector('.fpHeader');
  ctr.contents = ctr.el.querySelector('.fpContents');
  ctr.position = ctr.el.querySelector('.fpPosition');
  ctr.footer = ctr.el.querySelector('.fpFooter');
  ctr.dim = document.createElement('i');
  ctr.dim.setAttribute('class', 'fpDim');
  ctr.el.appendChild(ctr.dim);
  ctr.headerHeight;
  ctr.footerHeight;
  ctr.elStyle;
  var fnReady = function (ctr, fn) {
    if (document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading') {
      fn();
    } else {
      document.addEventListener('DOMContentLoaded', fn);
    }
  };
  // var fnHasClass = function(e, name) {
  //   var classs = e.getAttribute('class');
  //   if (classs === null || classs === undefined || classs === ' ') {
  //     return false;
  //   }
  //   if (classs.indexOf(name) === -1) {
  //     return false;
  //   } else {
  //     return true;
  //   }
  // };
  var fnAddClass = function (e, name) {
    var classs = e.getAttribute('class');
    if (classs === null || classs === undefined || classs === ' ') {
      e.setAttribute('class', name);
      return false;
    }
    if (classs.indexOf(name) === -1) {
      e.setAttribute('class', classs + ' ' + name);
    }
  };
  var fnRemoveClass = function (e, name) {
    var classs = e.getAttribute('class');
    if (classs === null) {
      return false;
    }
    if (classs.indexOf(name) !== -1) {
      classs = classs.substr(0, classs.indexOf(name) - 1);
      e.setAttribute('class', classs);
    }
  };
  // var fnToggleClass = function() {
  //   var classs = ctr.el.getAttribute('class');
  //   var name = 'open';
  //   if (classs === null) {
  //     ctr.el.setAttribute('class', name);
  //     return false;
  //   }
  //   if (classs.indexOf(name) === -1) {
  //     ectr.el.setAttribute('class', classs + '...