제이쿼리를 이용한 레이어 팝업을 적용하면 기존 페이지 구조가 깨져버리네요
본문
안녕하세요 ㅎ; 초보자라서 질문 올립니다 혹시 해결법을 아신다면 답변 부탁드리겠습니다
구글링을 하면 나오는 제이쿼리 다이얼로그를 이용하는 방법으로 레이어 팝업을 만들었는데요
팝업안쪽의 내용을 포함하는 div안에 table형식으로 코딩이 되어있는데
이부분이 다른페이지에 인클루드 시켰을때 다른테이블에 영향을 줘서
기존의 페이지에 코딩이 흐트러져 버리는 현상이 있네요
레이어 안에 z-index를 따로 줘야하는건지 ㅎㅎ;
<script>
$(function(){
//클릭이벤트를 위한 a 태그에 버튼UI 적용
$("#modalbutton").button();
//dialogLayout레이아웃을 다이얼로그라고 정의
$("#dialogLayout").dialog({
//이벤트발생시 open해주기 위하여 false 로 지정
autoOpen: false,
//다이얼로그의 넓이지정
show: 'fade',
hide: 'fade',
width: 950,
//버튼 설정
buttons: [{
text: "확인",
click: function() {
$(this).dialog("close");
}
},{
text: "취소",
click: function() {
$(this).dialog("close");
}
}]
});
//버튼 클릭시
$("#modalbutton").click(function(e) {
//dialogLayout 레이아웃내에 정의된 내용을 다이얼로그를 이용하여 OPEN
$("#dialogLayout").dialog("open");
e.preventDefault();
});
});
</script>
</head>
<!--버튼UI적용을 위한 A태그 -->
<p><a href="#" id="modalbutton">모달띄우기</a></p>
<!-- 클릭이벤트 발생시 다이얼로그창에 띄워줄 레이어-->
<div id="dialogLayout" title="이곳은 모달창 상단 제목 부분입니다.(title) ">
<p>디자인이 심플하고 깔끔한 jqueryUI의 레이아웃 팝업창(모달창) 입니다.<br/>
드래그 기능도 지원 됩니다.<br/>
감사합니다.
</p>
<table width="950">
이하 레이어 팝업 내의 양식내용
</table>
</div>
형식으로 되어있습니다 ㅜ 뭐가문제일까요?
