일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- Spring Batch
- laravel
- tool
- IntelliJ
- Spring Boot
- php
- it
- springboot
- db
- Spring
- ubuntu
- Gradle
- Git
- ReactJS
- 맛집
- 요리
- devops
- javascript
- jenkins
- Design Patterns
- Oracle
- JVM
- java
- elasticsearch
- Web Server
- redis
- AWS
- MySQL
- linux
- jsp
Archives
- Today
- Total
아무거나
[jquery] full layer 팝업 본문
반응형
(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> // 팝업표시할 아이프레임
반응형
'Javascript & HTML & CSS > Javascript' 카테고리의 다른 글
[jquery] Input TYPE=“File” 을 히든으로 하고 외부 버튼을 눌러서 파일을 선택 (0) | 2019.12.24 |
---|---|
[jquery] ajax 통신중 로딩바 만들기 (0) | 2019.12.24 |
순수 javascript로 get방식으로 넘어온 파라메터 가져오기 (0) | 2019.12.24 |
글자수 체크 (0) | 2019.12.24 |
==, === 차이 (0) | 2019.12.24 |
Comments