bPopup 으로 iframe 팝업
페이지 정보
작성자 JMStudy 작성일16-02-26 19:59 조회6,338회 댓글0건본문
방법1.
var bookpopup;
var topPos = ((screen.availHeight - 400)/2 - 180);
;(function($) {
$(function() {
$('#infopopup_btn').bind('click', function(e) {
e.preventDefault();
var url = $(this).attr('url');
obj_bookpopup=$('#div_infopopup').bPopup({
content:'iframe', //'ajax', 'iframe' or 'image'
contentContainer:'.infopop_contents',
position: ['auto', topPos],
iframeAttr: 'scrolling="no" frameborder="0" style="height:480px;width:690px;"',
loadUrl: url
});
});
});
})(jQuery);
방법 2.
반복문에 팝업 구현시 파라미터값 넘기기
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../js/jquery.bpopup.min.js"></script>
<script src="http:////cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<SCRIPT type="text/javascript">
;(function($) {
$(function() {
$('body').on('click', '.small', function(e) {
e.preventDefault();
var popup = $('#popup'),
content = $('.content'),
self = $(this);
popup.bPopup(self.data('bpopup') || {});
});
});
})(jQuery);
</SCRIPT>
<style>
/* 클릭할 버튼 */
.button {
background-color: #2b91af;
color: #fff;
cursor: pointer;
display: inline-block;
padding: 5px 20px;
text-align: center;
text-decoration: none;
}
/* 닫기 버튼 */
.button.b-close{
box-shadow: none;
font: bold 131% sans-serif;
padding: 0 6px 2px;
position: absolute;
right: -7px;
top: -7px;
}
</style>
<div id="popup">
<span class="button b-close"><span>X</span></span>
<div class="content"></div>
</div>
<span class="button" data-bpopup='{"content":"iframe","contentContainer":".content","iframeAttr": "scrolling=auto frameborder=0 width=800 height=600","loadUrl":"./view.php?&id=<?=$row[id]?>"}'>보기</span>
댓글목록
등록된 댓글이 없습니다.