팝업 데이터로 불러오기

팝업 데이터로 불러오기

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

}

예제 샘플 

http://ux.adqua.co.kr/ux/ixkfo86/test/dataPopup/index.html