팝업 데이터로 불러오기
HTML
<div id="wrap">
<section>
<ul>
<li><a href="javascript:;">팝업1</a></li>
<li><a href="javascript:;">팝업2</a></li>
<li><a href="javascript:;">팝업3</a></li>
<li><a href="javascript:;">팝업4</a></li>
</ul>
<p class="height"></p>
</section>
<div class="popup_layer" id="popup_event">
<div class="inner">
<a href="javascript:;" class="btn_close">X</a>
<div class="video_box">
<iframe src="" frameborder="0" allowfullscreen></iframe>
</div>
<p>데이터 텍스트 들어가는 곳 </p>
</div>
</div>
<div class="dimd"></div>
</div>
CSS
.popup_layer{
display:none; position: absolute; top:0; left:50%; width:800px;
margin-left:-450px; border:1px solid red; z-index:200; background:#fff;}
.popup_layer .inner{ position: relative; padding:15px;}
.popup_layer .inner .btn_close{position: absolute; top:-30px; right:0;
font-size:20px; color:#fff; text-decoration: none;}
.popup_layer .inner .video_box{ width:600px; height:400px;}
.popup_layer .inner .video_box iframe{ width:770px; height:100%;}
.dimd{ display:none; position:fixed; top:0; left:0; width:100%;
height:100%; background:#000; opacity: 0.8; z-index:100;}
.height{ height:2000px;} /* 스크롤 만들려고 높이값 만든 거 */
JAVASCRIPT
var _data;
function Init()
{
_data = App.server.getYoutubeData();
create();
addEvent();
}
var $btnCount,
$btnTarget;
var $popupLayer,
$popupDimd,
$popupClose;
var _w;
function create()
{
$btnCount = $( "ul" );
$btnTarget = $( "ul" ).children( "li" );
$popupLayer = $( ".popup_layer" );
$popupDimd = $( ".dimd" );
$popupClose = $( ".btn_close" );
_w = $( window );
}
function addEvent()
{
$btnTarget.on( "click", openPopup );
$popupClose.on( "click", closePopup );
$popupDimd.on( "click", dimdClick );
}
function dimdClick( $e )
{
hide();
}
function openPopup( $e )
{
var index = $( this ).index();
var data = _data[ index ];
var wH = _w.height();
var pH = $popupLayer.height();
var center = _w.scrollTop() + ( wH - pH ) /2 ;
$popupLayer.css( "display", "block" );
TweenMax.set( $popupLayer, { top : pH, opacity: 0 });
TweenMax.to( $popupLayer, 0.3, { top : center, opacity: 1, ease: Expo.easeOut });
$popupDimd.css( "display", "block" );
var id = "https://www.youtube.com/embed/" + data.youtube;
var de = data.description;
console.log( id, de );
$popupLayer.find( "iframe" ).attr( "src", id );
$popupLayer.find( "p" ).html( de );
}
function closePopup()
{
hide();
}
function hide()
{
$popupLayer.css( "display", "none" );
$popupDimd.css( "display", "none" );
$popupLayer.find( "iframe" ).attr( "src", "" );
}
return{
Init : Init
}
server.js
var _youtubeData;
function Init()
{
create();
addEvent();
}
function create()
{
carativeYoutubeData();
}
function addEvent()
{
}
function carativeYoutubeData( )
{
_youtubeData = {
data : [
{
youtube: "_3GbiJCCP5k",
description : "비올때 노래 영상"
},
{
youtube: "VKfbVLmkQUs",
description : "드라마 OST TOP 15 영상"
},
{
youtube: "YYTr-UBQQT0",
description : "소향 좋은 노래 모음 영상"
},
{
youtube: "4PTNSqPaRNo",
description : "엠씨더맥스 좋은 노래 모음 영상"
}
]
}
}
function getYoutubeData()
{
return _youtubeData.data;
}
return{
Init : Init,
getYoutubeData : getYoutubeData
}
예제 샘플
'javascript > sample' 카테고리의 다른 글
이전 버튼 다음 버튼 클릭 시 해당 녀석 찾기 (0) | 2018.05.17 |
---|---|
자바스크립트 특정 날짜 (0) | 2018.05.17 |
원페이지 스크롤 (0) | 2018.04.12 |
페럴럭스 기초 2편 (0) | 2018.04.11 |
페럴럭스 기초 1편 (0) | 2018.04.11 |