Javascript & HTML & CSS/Javascript
[jquery] full layer 팝업
전봉근
2019. 12. 24. 01:53
반응형
(function($){
$.fn.extend({
fullPopupOn : function(opt) {
ele = this;
ele_w = this.width();
ele_h = this.height();
if(opt){
if(opt.width){
ele_w = opt.width;
this.css('width',ele_w);
}
if(opt.height){
ele_h = opt.height;
this.css('height',ele_h);
}
}
marginleft = (ele_w/2)*(-1);
margintop = (ele_h/2)*(-1);
html = "<div class='fullpopupbg' style='background:rgba(1,1,1,0.8); position:fixed; top:0; left:0; width:100%; height:105%; z-index:9998;'></div>";
$('body').append(html);
this.css({'position':'fixed','left':'50%','top':'50%','margin-left':marginleft+'px','margin-top':margintop+'px','z-index':'9999','display':'block'});
$(document).on('click','.fullpopupbg',function(){
$(ele).fullPopupOff();
});
},
fullPopupOff : function() {
$('.fullpopupbg').remove();
this.css('display','none');
this.attr('src','');
},
fullPopupChg:function(){
marginleft = (this.width()/2)*(-1);
margintop = (this.height()/2)*(-1);
this.css({'margin-left':marginleft+'px','margin-top':margintop+'px'});
}
});
})(jQuery);
// 이 함수로 호출
$('#popup_base').fullPopupOn({
width:400,
height:300
});
<iframe id="popup_base" src="/blank" style="display:none; position:fixed; width:70%; height:80%; background:#fff; border-radius:4px; "></iframe> // 팝업표시할 아이프레임
반응형