How to create a modal window in jQuery.

Code Snippet

66.  
67. $(function () {
68.     $('#iDialog').dialog({
69.         autoOpen: false,
70.         width: 800,
71.         height: 400,
72.         resizable: false,
73.         modal: true,
74.         buttons: [{ text: "Ok", click: function () { $(this).dialog("close"); } }]
75.     });
76. });
77.  
78. $(document).ready(function () {
79.     $('#show-modal-industry').click(function () {
80.         $('#iDialog').load(industryUrl, function () {
81.             $('#iDialog').dialog('open');
82.         });
83.  
84.         return false;
85.     });
86. });
87.  
88.  
89. $(function () {
90.     $('#aDialog').dialog({
91.         autoOpen: false,
92.         width: 800,
93.         height: 400,
94.         resizable: false,
95.         modal: true,
96.         buttons: [{ text: "Ok", click: function () {
97.             alert('Hello World'); $(this).dialog("close"); } }]
98.     });
99. });
100.  
101. $(document).ready(function () {
102.     $('#show-modal-association').click(function () {
103.         $('#aDialog').load(associationUrl, function () {
104.             $('#aDialog').dialog('open');
105.         });
106.  
107.         return false;
108.     });
109. });

Code Snippet

48. <div id="iDialog" title="Industry">
49. </div>
50. <div id="aDialog" title="Association">
51. </div>
52. <script type="text/javascript">
53.  
54.     var industryUrl = '@Url.Action("GetIndustryInfo", "Home")';
55.     var associationUrl = '@Url.Action("GetAssociationInfo", "Home")';
56.     
57. </script>