[jquery+ajax] dynamic layer popup (?)

layer popup을 동적으로 생성하는 방법 정리.
기존 소스들을 열심히 살펴보았지만 모르겠다. -_-

그래서 생각한 것

1. ajax로 서버에 값을 호출한다.
2. 서버에서 해당 호출에 대한 jsp 페이지 코드를 생성한 뒤 jsonObject 로 던진다
3. 스크립트에서 jquery를 이용하여 동적으로 화면을 생성한다.


...

머리가 나빠서 이렇게 밖에 생각을 못하겠다.
하루를 다 써버렸다;;;

뭔가, 더 쌈박한 방법이 있을텐데...ㅠㅠㅠㅠㅠ

source

home.jsp
<style>
img{float:left; margin:17px}
p{float:left;width:300px}
#mask {
position: absolute;
  left:0;
  top:0;
  width: 100%,
  height: 100%,
  z-index:10000;
  background-color:#000;
  display:none;
}
#show {
  position: absolute;
  left:30%;
  top:20%;
  width:300px;
  height:300px;
  display: none;
}
</style>

<p>
<a href="#" onclick="javascript:maskMng.createMast();">click black mask create!!!!</a>
</p>
<div id="show">
<p>test modal popup</p>
Good morning
<input type="button" value="Next"/>
</div>


<div id="mask">
</div>




mask.js
createMast : function(){
var maskHeight = $J(document).height();
       var maskWidth = $J(window).width();

       $J('#mask').css({'width':maskWidth,'height':maskHeight});

       $J('#mask').fadeIn(100);    
       $J('#mask').fadeTo("fast",0.6);  
     
     
      var url1 = context + '/popup01';
       alert(url1);
     
       $J.ajax({
        type: "post",
        url: url1,
        data: "data:1"
       }).done(function(data){
        console.log(data);
        console.log('----------');
        maskMng.repaint(data);
       });
     

},

repaint : function(data){
alert('repaint:'+ data.result.src);
var clearDiv = document.getElementById("show");
var parentNode = clearDiv.parentNode;
parentNode.removeChild(clearDiv);
console.log('clean div');
var newdiv = document.createElement('div');
newdiv.id = "show";
parentNode.appendChild(newdiv);
console.log('create div');
$J('#show').html(data.result.src);

console.log('insert html');

$J('#show').show();
}


homeContoller.java

@RequestMapping(value = "/popup01")
public void popup01(Locale locale, Model model,HttpServletResponse response) {
logger.error("popup01", locale);

HashMap <String, Object> mm = new HashMap<String, Object>() ;

String src = "" ;
src = "<form class=\"form-container\">" +
"<div class=\"form-title\">" +
"<h2>Sign up</h2>" +
"</div>" +
"<div class=\"form-title\">Name</div>"+
"<input class=\"form-field\" type=\"text\" name=\"firstname\" /><br />" +
"<div class=\"form-title\">Email</div>" +
"<input class=\"form-field\" type=\"text\" name=\"email\" /><br />" +
"<div class=\"submit-container\">" +
"<input class=\"submit-button\" type=\"submit\" value=\"Submit\" />" +
"</div>" +
"</form>";

mm.put("url", "popup/popup01.notiles") ;
mm.put("src",src);
JSONObject jso = new JSONObject();  
jso.put("result", mm) ;


try {
       response.setContentType("application/json");
       PrintWriter out = response.getWriter();
       out.println(jso);
       out.close();
   } catch (IOException e) {
       e.printStackTrace();
   }


}





[결과]