HTML

본 토픽은 현재 준비중입니다. 공동공부에 참여하시면 완성 되었을 때 알려드립니다.

Bpopup

<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
   pageEncoding="utf-8"%>
<%request.setCharacterEncoding("utf-8");%>
 
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="../../js/jquery.bpopup.min.js"></script>
 
    <style type="text/css">body { position: relative; }
    .popup-div { opacity: 0; display: none; position: relative; width: auto; }
    .popup-style { border: 5px solid #06f; padding: 20px; background-color: #fff; }
    .b-close { position: absolute; right: 5px; top: 5px; padding: 5px; display: inline-block; cursor: pointer; }
    .button { padding: 5px 10px; border: 1px solid #666; display: inline-block; cursor: pointer; }
    </style>
    <body>
 
    <span class="button" id="btn1">slideDown 기본스타일 팝업</span>
 
    <div id="popup1" class="popup-div popup-style">    
        <span class="b-close"><span>X</span></span>    
        <div class="content" style="height: auto; width: auto;">    
            <div class="b-ajax-wrapper">    
                <div>
                <h2>popup1</h2>
                    <p>팝업 1 <a href="http://..../bpopup/" target="_blank">http://..../bpopup</a></p>
                    <p>기본팝업 테스트</p>
                </div>
            </div>
        </div>
    </div>
 
    <script type="text/javascript">$(document).ready(function() {
    $('#btn1').on('click', function(event) {
    event.preventDefault();
    $('#popup1').bPopup();
    });
    });
    </script>
 
</body>
  • 봤어요 (0명)

댓글

댓글 본문
graphittie 자세히 보기