POP UP창 실습

in Programming on HTML/CSS

간단한 팝업창 만들기 실습!

try it out here

popup

html 과 css를 충분히 배운 오늘, 위와 같은 팝업창을 만드려고 한다.

일단 javascript와 연동을 하지 않아서 버튼 이벤트는 나중에 추가하려고 하고, 일단 형식만 만들어 놓자

1. img tag를 이용해 배경에 이미지를 추가한다.

modal1

2. 팝업창 구조를 먼저 생각한다.

modal2

팝업창의 구조는 다음과 같다.

  • popup > popup-wrap > popup-inner > popup-layer > textarea

  • popup > popup-wrap > popup-inner > popup-layer > button area > button

  • 각각 다음과 같은 역할을 한다.

    1. popup 에서는 position : fixed를 사용해 스크롤을 해도 팝업창이 그자리에 그대로 있을 수 있게 만들어 준다.

2. popup-wrap과 popup-inner는 popup창의 수평,수직적으로 중앙정렬을 하기 위해 사용된다.

3. popup-layer은 알림 text와 button을 담는 컨테이너다.

이렇게 큰 구조를 생각하며 만들어보도록 하자.

    일단 위를 기반으로 html을 만들면 아래와 같이 된다.

    <div class ="popup">
    <div class= "popup-wrap">
        <div class ="popup-inner">
            <div class = "popup-layout">
            </div>
        </div>
    </div>
</div>

3. popup class css

아래와 같은 코드로 fix된 화면을 생성해준다. top left right bottm 을 모두 0으로 주면, 전체화면을 덮게된다. (전체화면이 덮이는 것을 보여주기 위해 background-color 를 pink로 주었다.)

popup2

.popup{
  position : fixed;
  top : 0;
  left : 0;
  right : 0;
  bottom : 0;
}

4. popup-wrap, popup-inner css

테이블 요소로 만들어 vertical align 을 할 수 있게 한다. 아니 수직 중앙 정렬이 좀 복잡하다..(먼 산)

.popup-wrap{
  display: table;
  text-align: center;
  table-layout: fixed;/*성능에 좋다.*/
  width: 100%;
  height: 100%;
}
.popup-inner{
  display : table-cell;
  vertical-align: middle;
  text-align: center;
}

5. popup-layout

여기서 구체적인 layout 을 잡는다. display를 inline-block으로 해주어야지 위에 부모인 popup-inner의 text-align :center이 적용되어 중앙으로 정렬이된다. 그냥 inline으로 하면 폭, 높이 가질 수 없다. 또 z축인 zindex를 높게 주어서 그 무엇보다 앞에 튀어나오게 해준다.

popup3

.popup-layout{
  display: inline-block; /*부모요소의 text-align : center을 적용하기 위해*/
  position: relative;/*자식요소를 위해.*/
  width: 500px;
  height : 300px;
  background-color : white;
  z-index: 10;
}

6. textarea

popup4

너무 쉬워서 생략. 그냥 마진 주고 내용 입력한다.

7. btnarea css

width는 부모의 100% 이고, height 는 50px(임의의 수)을 가지며 아래에 딱 붙는 button area를 만들려 한다. positon 키워드를 이용해서 만들 수 있다. position : absolute, buttom :0, right :0, left :0 의 속성을 주면, 좌,우, 아래에 딱 붙는 area를 만들 수 있다.

그런데 기준점을 생각해줘야한다. 어디를 기준으로 딱 붙는가? 부모 요소 중 absolute나 relative의 키워드가 있는 그 곳이 기준이 된다. 그렇기 때문에 위 popup-layout에 position:relative를 해준 것이다.!

popup6

.btnarea{
  position: absolute;
  bottom:0;
  right:0;
  left:0;
  height: 100px;
  background-color: yellow;
}

8. input button css

input button 으로 예, 아니오를 만들어준다. 쉽다.

popup7

input{
  width: 50%;
  height: inherit;
  float: left;
  background-color: orange;
}
.no{
  background-color: pink;

}

9. popup-dimmed

팝업창을 제외한 배경을 어둡게 해준다. 여기서 키 포인트는, dimmed div태그가 들어갈 자리다. popup-layout 의 z인덱스와 연관이 되려면, 같은 조상 아래에 있어야한다.

popup8

<div class="popup">
  <div class="popup-wrap">
    <div class="popup-inner">
      <div class="popup-layout">
        <div class="textarea">
          팝업창 실습입니다.<br><br>
          여기에 내용을 입력하면 됩니다.
        </div>

        <div class="btnarea">
          <input type="button" name="" value="yes">
          <input class = "no" type="button" name="" class ="btn no" value="no">
        </div>

        </div>

      </div>

    </div>
    <div class="popup-dimmed"></div>
  </div> <!--이게 popup 닫히는 태그.-->

완성!!!~~

popup8

전체 코드

<!DOCTYPE html>
<html lang="ko" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Pop up </title>
    <link rel="stylesheet" href="CSS.css">
  </head>
      <img src="yes.jpg" width="100%">
<!--popup  > popup-wrap > popup-inner > popup_layer > textarea-->

<div class="popup">
  <div class="popup-wrap">
    <div class="popup-inner">
      <div class="popup-layout">
        <div class="textarea">
          팝업창 실습입니다.<br><br>
          여기에 내용을 입력하면 됩니다.
        </div>

        <div class="btnarea">
          <input type="button" name="" value="yes">
          <input class = "no" type="button" name="" class ="btn no" value="no">
        </div>

        </div>

      </div>

    </div>
    <div class="popup-dimmed"></div>
  </div>


  </body>
</html>

@charset "utf-8";
.popup{
  position : fixed;
  top : 0;
  left : 0;
  right : 0;
  bottom : 0;

}
.popup-wrap{
  display: table;
  text-align: center;
  table-layout: fixed;/*성능에 좋다.*/
  width: 100%;
  height: 100%;
}
.popup-inner{
  display : table-cell;
  vertical-align: middle;
  text-align: center;
}
.popup-layout{
  display: inline-block;
  position: relative;
  width: 500px;
  height : 300px;
  background-color : white;
  z-index: 100;
}

.textarea{
  margin: 40px;
}
.btnarea{
  position: absolute;
  bottom:0;
  right:0;
  left:0;
  height: 100px;
}

input{
  width: 50%;
  height: inherit;
  float: left;
  background-color: orange;
}
.no{
  background-color: pink;

}

.popup-dimmed{
  position: absolute;
  height: 100%;
  background: black;
  top :0;
  left :0;
  bottom : 0;
  right : 0;
  opacity: 0.3;
}

© 2018. All rights reserved.

Powered by Hydejack v8.5.2