2014년 11월 13일 목요일
dynamic layer popup_02
또 다른 방법을 찾아보았다.
.load() 함수를 쓰는 것!
$(selector).load( url, data, function ) ;
요렇게 쓰는 녀석이다.
내가 쓴 코드
<script>
$J(document).ready(function(){
var url1 = context + '/popup01';
$J('#my-button').bind('click', function(e) {
$J.ajax({
type: "post",
url: url1
}).done(function(data){
$J('#element_to_pop_up').bPopup({
content:'iframe', //'ajax', 'iframe' or 'image'
contentContainer:'.content',
loadUrl: context + data.result.url//Uses jQuery.load()
});
});
});
});
</script>
<style>
#element_to_pop_up { display:none;
left:30%;
top:20%;
width:660px;
height:550px;
}
#rightarea{
float:right;
}
</style>
<button id="my-button" >POP IT UP</button>
<div id="element_to_pop_up">
<div class="content" id="content"></div>
</div>
<div id="rightarea"><input type="button" value=">>>>" id="rightBtn"/></div>
<input type="button" id="driver" value="Load Data" />
-> ajax로 controller 쪽으로 요청을 보낸 뒤 해당 url을 반환 한다.
일단 처음에
bPopup으로 팝업을 띄운 뒤,
<html>
<style>
.form-container {
border: 1px solid #f2e3d2;
background: #c9b7a2;
background: -webkit-gradient(linear, left top, left bottom, from(#f2e3d2), to(#c9b7a2));
background: -webkit-linear-gradient(top, #f2e3d2, #c9b7a2);
background: -moz-linear-gradient(top, #f2e3d2, #c9b7a2);
background: -ms-linear-gradient(top, #f2e3d2, #c9b7a2);
background: -o-linear-gradient(top, #f2e3d2, #c9b7a2);
background-image: -ms-linear-gradient(top, #f2e3d2 0%, #c9b7a2 100%);
-webkit-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
font-family: 'Helvetica Neue',Helvetica,sans-serif;
text-decoration: none;
vertical-align: middle;
min-width:600px;
padding:0px;
margin:0px;
width:600px;
height:450px;
}
.form-field {
border: 1px solid #c9b7a2;
background: #e4d5c3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #c9b7a2;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
padding:8px;
margin-bottom:20px;
width:280px;
}
.form-field:focus {
background: #fff;
color: #725129;
}
.form-container h2 {
text-shadow: #fdf2e4 0 1px 0;
font-size:18px;
margin: 0 0 10px 0;
font-weight:bold;
text-align:center;
}
.form-title {
margin-bottom:10px;
color: #725129;
text-shadow: #fdf2e4 0 1px 0;
}
.submit-container {
margin:8px 0;
text-align:right;
}
.submit-button {
border: 1px solid #447314;
background: #6aa436;
background: -webkit-gradient(linear, left top, left bottom, from(#8dc059), to(#6aa436));
background: -webkit-linear-gradient(top, #8dc059, #6aa436);
background: -moz-linear-gradient(top, #8dc059, #6aa436);
background: -ms-linear-gradient(top, #8dc059, #6aa436);
background: -o-linear-gradient(top, #8dc059, #6aa436);
background-image: -ms-linear-gradient(top, #8dc059 0%, #6aa436 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
text-shadow: #addc7e 0 1px 0;
color: #31540c;
font-family: helvetica, serif;
padding: 8.5px 18px;
font-size: 14px;
text-decoration: none;
vertical-align: middle;
}
.submit-button:hover {
border: 1px solid #447314;
text-shadow: #31540c 0 1px 0;
background: #6aa436;
background: -webkit-gradient(linear, left top, left bottom, from(#8dc059), to(#6aa436));
background: -webkit-linear-gradient(top, #8dc059, #6aa436);
background: -moz-linear-gradient(top, #8dc059, #6aa436);
background: -ms-linear-gradient(top, #8dc059, #6aa436);
background: -o-linear-gradient(top, #8dc059, #6aa436);
background-image: -ms-linear-gradient(top, #8dc059 0%, #6aa436 100%);
color: #fff;
}
.submit-button:active {
text-shadow: #31540c 0 1px 0;
border: 1px solid #447314;
background: #8dc059;
background: -webkit-gradient(linear, left top, left bottom, from(#6aa436), to(#6aa436));
background: -webkit-linear-gradient(top, #6aa436, #8dc059);
background: -moz-linear-gradient(top, #6aa436, #8dc059);
background: -ms-linear-gradient(top, #6aa436, #8dc059);
background: -o-linear-gradient(top, #6aa436, #8dc059);
background-image: -ms-linear-gradient(top, #6aa436 0%, #8dc059 100%);
color: #fff;
}
</style>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/form/form.css"/>
<script src="${pageContext.request.contextPath}/resources/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
var $J = jQuery.noConflict();
var context = '${pageContext.request.contextPath}';
</script>
<script src="${pageContext.request.contextPath}/resources/js/bPopup/jquery.bpopup.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/mask/mask.js"></script>
<script>
$J(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$J('.submit-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
maskMng.clearDiv();
});
});
</script>
<body>
<div id="mom">
<form class="form-container" id="form-container">
<input type="hidden" name="val1" id="val1" value="123" />
<div class="form-title">
<h2>Setting</h2>
</div>
<div class="form-title">Name1</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="form-title">manggo</div>
<input class="form-field" type="text" name="firstname" /><br />
<div class="form-title">medicine</div>
<input class="form-field" type="text" name="email" /><br />
<div class="submit-container">
<input class="submit-button" type="submit" value="Submit" />
</div>
</form>
</div>
</body>
</html>
-> 띄운 화면에서 버튼을 누르면 또다시 ajax 로 다음 화면 주소를 요청하고 결과로 받은 url 을
$J('#mom').load(context+data.result.url);
이렇게 load 해주면 된다.
하하하
피드 구독하기:
댓글 (Atom)
댓글 없음:
댓글 쓰기