네이버 모바일 같은 사이드바 메뉴 , side Overlay menubar

모바일 웹 만드는 과정에 네이버 사이트를 모델로 삼아서 개발하는데 

사이드바 메뉴가 탐나서 jqueryUI를 이용한  dialog 메뉴를 이용해서 만들어 보았다. 

사용하는 js 아래 와 같고 

<script type="text/javascript" src="http:/www.duranno.com/main/script/jquery-1.7.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

아래는  css 

<style type="text/css">

#dlg{

width:500px;

height:500px;

min-height:500px;

background-color:skyblue;

border:1px solid red;

display:none;

z-index:2;

}

.overlay{

position:absolute;

top:0;

left:0;

display:none;

background-color:black;

z-index:0;

}

.no-close .ui-dialog-titlebar-close {

display: none;

 

}

</style>

그리고 이건 관련 스크립트 

<script type="text/javascript">

$(document).ready(function () {

$('#open').click(function () {

$(".overlay").height($(window).height());

$(".overlay").width($(window).width());

$(".overlay").fadeTo(500, 0.4);

$("#dlg").dialog({

draggable : false,

     dialogClass: "no-close",

// dialogClass: ",

position:[0,0],

modal : false,

//appendTo : "#menuB",

buttons : false,

width: "500px",

height: "auto",

show: {

effect: "slide",

duration: 500,

},

hide: {

effect: "slide",

duration: 500

},

open : function() {

   $(this).dialog("widget").find(".ui-dialog-titlebar").hide()

  },

beforeClose: function () {

$(".overlay").fadeTo(1000, 0);

},

close: function () {

$(".overlay").css("display", "none");

},

resizeStop: function (event, ui) {

$("#if").height($(this).height());

$("#if").width($(this).width());

}

});

});

$(".overlay").click(function(){

$("#dlg").dialog( "close" );

});

});

</script>

아래 html을 사용해서 구현을 볼수 있다. 

<div id="open">

Open Dialog 클릭 !

</div>

<div class="overlay">

</div>

<div id="dlg">

<table>

<tr><td>1  <a href="javascript:alert(3)">alert </a></td></tr>

<tr><td>2</td></tr>

<tr><td>4</td></tr>

<tr><td>5</td></tr>

</table>

</div>