bPopup 간단한 팝업 컨트롤

- http://dinbror.dk/bpopup/, 

 - http://annotations.tistory.com/55

아래 내용을 javascript 라이브러리에 넣는다

var jsonpDom, jsonpData;

function callJsonp(u1,d1){

  $.ajax({

    type: 'POST',

    cache:false,                                                        // false 캐시 되지 않아야 할 때

    dataType : 'jsonp',                                               // jsonp, https:// 와 섞어 써서 보안성 제고

    jsonp : 'callback',                                                // jsonp 명칭을 callback 으로 하거나 다른 명칭도 상관없음

    url : u1,

    data : d1,                                                         // 전달할 데이타. 기본이 UTF-8 이므로 한글 세팅에 항상 유의

    success : function(d){

      jsonpData = d;                                               // ajax 로 호출되는 쪽에서 세팅하는 데이타를 글로벌 변수에 세팅

      if(d.dom!='') jsonpDom = d.dom;                        // DOM 형태의 HTML

      if(d.msg!='') alert(d.msg);                                   // 메시지가 있으면 알림창

      if(d.cb!=''){ try{ eval(d.cb); }catch(e){} }                  // callback 이 필요한 경우

    },

    error:function(d){ alert('Ajax error - callJsonp '); }

  });

}

function openBPopupDom(){

  var option = {

    modalClose:false//false 모달 팝업이고, 팝업이 올려지는 바탕을 클릭해도 팝업이 닫히지 않음

    ,opacity:0.75//팝업이 올려지는 바탕을 반투명하게 세팅

    ,positionStyle:'fixed'//fixed 화면이 상하로 스크롤 되어도 본문 내용은 스크롤 되지만 팝업은 고정 위치

    ,fadeSpeed:'slow'

    ,transition:'slideIn'//slideIn 팝업이 왼쪽에서 가운데로 열림

    ,transitionClose:'slideBack'//slideBack 팝업이 가운데에서 오른쪽으로 닫힘

    ,onOpen:function(){

      $('#idPopup .content').html(jsonpDom);

    }

  };

  $('#idPopup').bPopup(option);//http://dinbror.dk/bpopup/, http://annotations.tistory.com/55

}

function closeBPopup(){ $('#idPopup').bPopup().close(); }

아래 내용은 ajax 를 호출할 곳에 세팅

<style>

  .bPopup {border-radius:7px;box-shadow:0 0 25px 5px #999; background:white;color:black; padding:10px; min-width:450px;min-height:150px; display:none; position:relative;}

  .bPopup .button {background:#2b91af;color:#fff; border-radius:5px; padding:10px; text-align:center;text-decoration:none;cursor:pointer;}

  .bPopup .button.bClose {border-radius:7px; box-shadow:none; padding:5px 8px 4px 8px; position:absolute;right:-16px;top:-16px; font-size:12pt}

</style>

<div id="idPopup" class="bPopup">

  <span class="button bClose n1">X</span>

  <div id="idContent" class="content"></div>

</div>

<script>

  function callJ(p){ if(p!='') callJsonp('공통으로 사용될 URI', 'mode='+p); }

  function doSomething{ callJ('ActionMode&param='+param); } // serialize() 해도 되고, json 형식으로 세팅하고 $.param(...) 해도 되고..

</script>

아래 내용은 ajax 로 호출되어 jsonp 를 세팅하는 곳

<%@ page import="net.sf.json.JSONObject" %>

<%

  HashMap hm = new HashMap(); // jsonp 의 최후 목적물을 생성하고, 결과값을 세팅하기 위해 try 밖에 세팅

  try{

    ....

    hm.put("dom", "HTML 내용");

    hm.put("cb","func1(param1, param2, ...) func2()");

    ....

  }catch(Exception e){

    if(e.getMessage()!=null){

      hm.put("msg","작업시 오류가 발생하였습니다. ");

    }

  }finally{

    if(!hm.containsKey("result")) hm.put("result", result); // true 로 세팅하지 않았다면 false

    if(!hm.containsKey("msg")) hm.put("msg","");            // 특별한 메시지가 없었다면 통과

    if(!hm.containsKey("cb")) hm.put("cb","");              // jsonp 호출 이후 메소드 호출 때 cb 사용. 없다면 종료

    out.print(Utils.get(req.get("callback"))+"("+JSONObject.fromObject(hm)+")");

  }

%>