• 포토폴리오
  • 그누스킨
  • 소스팁
  • 제작의뢰
  • 질문답변
  • 공지사항
  • 로그인
  • 회원가입
  • 팝업만들기 (jquery 없이)

    페이지 정보

    개발자  0 Comments  174 Views  19-10-26 22:00  Css

    본문

    <style>
    

     .box {

                width: 20%;

                margin: 0 auto;

                background: rgba(255, 255, 255, 0.2);

                padding: 35px;

                border: 2px solid #fff;

                border-radius: 20px/50px;

                background-clip: padding-box;

                text-align: center;

              }

              .button {

                font-size: 1em;

                padding: 10px;

                color: #fff;

                border: 2px solid orange;

                border-radius: 20px/50px;

                text-decoration: none;

                cursor: pointer;

                transition: all 0.3s ease-out;

              }

              .button:hover {

                background: orange;

              }

              .overlay {

                position: absolute;

                top: 0;

                bottom: 0;

                left: 0;

                right: 0;

                background: rgba(0, 0, 0, 0.7);

                transition: opacity 500ms;

                visibility: visible;

                opacity: 1;

              }

              .overlay:target {

                visibility: hidden;

                opacity: 0;

                display:none

              }

              .popup {

                margin: 70px auto;

                padding: 20px;

                background: #fff;

                border-radius: 5px;

                width: 30%;

                position: relative;

                transition: all 5s ease-in-out;

              }

              .popup h2 {

                margin-top: 0;

                color: #333;

                font-family: Tahoma, Arial, sans-serif;

              }

              .popup .close {

                position: absolute;

                top: 20px;

                right: 30px;

                transition: all 200ms;

                font-size: 30px;

                font-weight: bold;

                text-decoration: none;

                color: #333;

              }

              .popup .close:hover {

                color: orange;

              }

              .popup .content {

                max-height: 30%;

                overflow: auto;

              }

    </style>





    <head></head> 에 넣어주시고



    본문 아무데나



    <div id="popup1" class="overlay">

            <div class="popup" >

                <h2>Title</h2>

                <a class="close" href="#popup1">×</a>

                <div class="content">

                    Content

                </div>

            </div>

        </div>



    이런식으로 됩니다!



    읽어주셔서 감사합니다.

    댓글목록

    등록된 댓글이 없습니다.

    Copyrightⓒ heogeol.com All rights reserved.