jquery dialog 사용법

http://todduf.blogspot.kr/2014/06/jquery-dialog.html

jquery dialog 사용법

view plainprint?

1. <script src="/Scripts/jquery-1.9.0.js" type="text/javascript"></script>   
2. <script src="/Scripts/jquery-ui-1.10.0.min.js" type="text/javascript"></script>  
3.   
4. // div 사용시 jquery dialog 사용자가 닫기 버튼을 만들어 dialog 를 닫을때 에러가 발생하는것은 sub페이지(즉add하는 페이지에) jquery 스크립트를 add 하여 문제가 발생한다.  
5. // div 사용시에는 별도의 script를 사용하지 않아도 하나의 페이지로 인식하기 때문에 sub페이지의 add된 스크립트를 제거하면 해결됨  
6. // div 사용시에는 서버단 에러가 나면 페이지 반응이 없음 이점 참고  
7.   
8. // iframe 을 사용하는경우에는 parent.jquery(".selector").dialog("close") 하면 해결 아니면 parent에 함수구현해서 호출하라  
9. // iframe 을 사용시 레이이웃이 깨지는 현상을 도저히 잡을수 없어서 div 테그로 쌓고 띄움.. 단점은 onload 시점을 호출할수 없다. close 할때 해당 페이지를 초기화 해야 함  
10.   
11. // jquery dialog 사용시 x버튼 위치가 맞지않거나 현재 사용하는 클래스 명이 충돌하여 문제가 생김  
12. <style type="text/css">  
13. .ui-datepicker{ font-size: 13.2px; width: 293px; height:295px; z-index:100; margin:0px;}  
14. .ui-dialog{z-index:100; margin-top:0px; margin-left:0px;}  
15. .ui-dialog-titlebar{background-color:#000000;background-image:none; margin:0px;}  
16. .ui-dialog .ui-dialog-titlebar-close span{margin-left:-8px; margin-top:-8px;}  
17. .ui-dialog .ui-dialog-content{background-color:#ffffff;}  
18. .daily_checkBox .daily_checkBoxRight{float:right; width:560px;}  
19. .btnGroup {width:390px; float:left; padding-top:1px; margin-left:5px}  
20. </style>  
21.   
22. <script type="text/javascript">  
23.  function DailyYearList() {  
24.         var Url = "/Lab/NDailyCheck/DailyYearList?LabNo=" + LabNo + "&Year=" + vDt.getFullYear();  
25.         $("#PopLayerBinding").load(Url, function () {  
26.             $("#PopLayerBinding").dialog({  
27.                 autoOpen: false,  
28.                 height: 500,  
29.                 width: 900,  
30.                 modal: true,  
31.                 title: "일상점검내역　　　　[" + "@strLabName" + "]",  
32.                 resizable: false,  
33.                 closeOnEscape: true,  
34.                 closeText: '닫기',  
35.                 //hide: 'slide',  
36.                 create: function (event, ui) {  
37.                 },  
38.                 open: function (event, ui) {  
39.                 },  
40.                 close: function () {  
41.                 },  
42.                 cancle: function () {  
43.                 }  
44.             });  
45.             $("#PopLayerBinding").dialog("open");  
46.         });  
47.     }  
48.   
49.     function PopLayerHide() {  
50.         $("#PopLayerBinding").dialog("close");  
51.     }  
52.   
53.   
54.  function fnCreate(LabNo) {  
55.         var Url = "/Lab/NDailyCheck/CreateDailyCheckOffline" + getLastUrl();  
56.         $("#subFrmBinding").attr("src", Url);  
57.         $("#subOffPopBinding").dialog({  
58.                 autoOpen: false,  
59.                 height: 500,  
60.                 width: 900,  
61.                 modal: true,  
62.                 title: "일상점검_오프라인(등록)　　　　[" + "@strLabName" + "]",  
63.                 resizable: false,  
64.                 closeOnEscape: true,  
65.                 closeText: '닫기',  
66.                 //hide: 'slide',  
67.                 create: function (event, ui) {  
68.                 },  
69.                 open: function (event, ui) {  
70.                 },  
71.                 close: function () {  
72.                 },  
73.                 cancle: function () {  
74.                 }  
75.             });  
76.             $("#subOffPopBinding").dialog("open");  
77.     }  
78.   
79.  function fnSubOffClose() {  
80.         $("#subOffPopBinding").dialog("close");  
81.     }  
82. </script>  
83.   
84.   
85. <li><a href="#" onclick="DailyYearList();"><img src="/images/btn/btn_check_History.png" width="94" height="25" alt="일상점검내역" title="일상점검내역"></a></li>  
86. <li><a href="#" onclick="fnCreate();"><img src="/images/btn/btn_check_History.png" width="94" height="25" alt="일상점검내역" title="일상점검내역"></a></li>  
87.   
88. <div id="PopLayerBinding">  
89. </div>  
90.   
91. <div id="subOffPopBinding">  
92.     <iframe id="subFrmBinding" width="900px;" height="500px;" frameborder="0"></iframe>  
93. </div>