ÃֽŠ°Ô½Ã±Û(WEB)
2020.01.28 / 24:48
javascript, jquery Æ˾÷ ·¹À̾î fadeIn(), fadeOut()
±îÄ¡¼³³¯
Ãßõ ¼ö 242
¹öÆ°À» ´©¸£¸é Æû À§¿¡ Æ˾÷ ·¹À̾ ¿Ã¶ó¿É´Ï´Ù.
¹ÙÀ» ´©¸£¸é âÀÌ ´ÝÈü´Ï´Ù.
µû·Î ´Ý´Â ¹öÆ°À» ¸¸µå½Ã°í closelayer(); ÇÔ¼ö¸¦ È£ÃâÇϼŵµ µË´Ï´Ù.
/* CSS */
<style>
.background{display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}
.background .dimBackground {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity: .5; filter:alpha(opacity=70);}
.background .popuplayer{display:block;}
.popuplayer {background-color:#f1f1f1;width:500px;height:500px;display:none;position:absolute;top:50%;left:50%;z-index:10;color:#000;}
</style>
/* javascript jquery */
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function layer_popup(el){
var $el = $(el);
var isDim = $el.prev().hasClass('dimBackground');
isDim ? $('.background').fadeIn() : $el.fadeIn();
var $elWidth = ~~($el.outerWidth()),
$elHeight = ~~($el.outerHeight()),
docWidth = $(document).width(),
docHeight = $(document).height();
if ($elHeight < docHeight || $elWidth < docWidth) {
$el.css({
marginTop: -$elHeight /2,
marginLeft: -$elWidth/2
});
}
else{
$el.css({top: 0, left: 0});
}
}
function closelayer(){
var isDim = $(".popuplayer").prev().hasClass('dimBackground');
isDim ? $('.background').fadeOut() : $el.fadeOut();
}
</script>
/* HTML */
<input type="button" Class="btn" value="Æ˾÷·¹ÀÌ¾î ¿±â" onCLick="javascript:layer_popup('#popuplayer');">
<div class="background">
<div class="dimBackground" onClick='javascript:closelayer();'></div>
<div id="popuplayer" class="popuplayer">Æ˾÷·¹À̾î</div>
</div>