개발팁

0 661 0

팝업만들기 (jquery 없이)

by 개발자
광고위치
<pre><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>



이런식으로 됩니다!



읽어주셔서 감사합니다.


광고위치

등록자 인끼 내용

PHP 웹페이지 파싱 클래스 (웹페이지 긁… omg 웹페이지 소스를 파싱하는 클래스입니다. url과 정규식을 입력하면 파싱결과를 뱉어줍니다. curl을 사용하였기 때문에 fopen과 달리 PHP설정이 all…
PHP EXCEL 엑셀 업로드 방법 omg <pre> &lt;?php include_once('./_common.php'); include_once(G5_PATH.'/head.sub.php'); incl…
CSS + Jquery 아코디언 메뉴.. … omg 아코디언메뉴를 만들어달라고 해서 간단하게 생각하고 OK했는데.. 인터넷상에 제대로 된 샘플이 많이 없더라구요 한 여덟가지 테스트하다가 그나마 하나 건져서 …

Comments (0)

인기내용

PHP 웹페이지 파싱 클래스 (웹페이지 긁… omg 웹페이지 소스를 파싱하는 클래스입니다. url과 정규식을 입력하면 파싱결과를 뱉어줍니다. curl을 사용하였기 때문에 fopen과 달리 PHP설정이 all…
PHP EXCEL 엑셀 업로드 방법 omg <pre> &lt;?php include_once('./_common.php'); include_once(G5_PATH.'/head.sub.php'); incl…
광고위치

사진작품

Log in
Register