ASP.NET MVC + jQuery UI ( Icon ) – HTML Helper Button + Modal Popup

ASP.NET MVC + jQuery UI ( Icon ) – HTML Helper Button + Modal Popup
 
Define the jQuery UI ( C# ) HTML Helper Code First.

 
   CSS
 
   #menupanel, #modalmenupanel
   {
     clear:both;
     position:relative;
     top:0px;
     left:0px;
     width:100%;
     height:30px;
   }
 
   .button, .submenu
   {
     border:1px solid #fc0;
     background-color:#fffea1;
   }
 
   .button
   {
     min-width:20px;
     height:26px;
     display:inline-block;
     text-decoration:none;
     clear:both;
     margin:0px 0px 0px 0px;
     padding:0px 0px 0px 0px;
     cursor:pointer;
     outline:0 !important;
   }
 
   .fullcorner
   {
     border-radius: 4px;
     margin:0px 4px 0px 4px;
   }
 
   .leftcorner
   {
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
     margin:0px 0px 0px 4px;
   }
 
   .rightcorner
   {
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
     margin:0px 4px 0px 0px;
   }
 
   .ui-icon
   {
     background-image:url('http://www.ccrd-bc.ca/images/icons/jquery-ui/ui-icons_222222_256x240.png');
     width:16px;
     height:16px;
     float:left;
     margin:5px 5px 5px 5px;
     cursor:pointer;
   }
 
   .ui-message
   {
     float:left;
     min-width:20px;
     color:#000000;
     margin:3px 5px 3px 0px;
     font-size:11pt;
     visibility: visible;
     cursor:pointer;
   }
 
   .parentbutton:hover:after
   {
     border: 1px solid #33AA33;
     padding: 3px 6px;
     background: #F3F3F3;
     border-radius:4px;
     opacity: 1;
     content: attr(data-tooltip);
     position: absolute;
     right: -25px;
     top: -10px;
     z-index: 10;
     cursor:default;
   }
 
   .parentbutton, .parentbutton_notooltip
   {
     position:relative;
     top:0px;
     left:0px;
     margin:0px;
     float:left;
     cursor:default;
   }
 
   .submenu
   {
     display:none;
     position:absolute;
   }
 
   .submenu .submenu_panel
   {
     margin:10px 6px 10px 6px;
   }
 
   .submenu .submenu_panel .submenu_panel_item
   {
     padding-right:20px;
     padding-left:10px;
     cursor:pointer;
   }
 
   .submenu .submenu_panel .submenu_panel_item:hover
   {
     background-color:#AA0033;
     color:#FFFFFF;
   }
 
   CSS Item about Modal
 
   #modal
   {
     position:fixed;
     width:1300px;
     height:600px;
     display:none;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     border:1px solid #fc0;
     background-color:#FFFFFF;
     border-radius:4px;
   }
 
   #modalmenupanel
   {
     margin:15px 0px 15px 0px;
   }
 
   .rightbtn
   {
     margin-right:15px;
     float:right !important;
   }
 
 
   View ( HTML )
 
   < div id="menupanel">
     @(Html.Button("", "showmodal();", "fullcorner", "ui-icon-search"))
   </div>
 
   < div id="modal">
     < div id="modalmenupanel">
       @(Html.Button("", "closemodal();", "fullcorner", "ui-icon-close", "rightbtn"))
     </div>
   </div>
 
   View ( JavaScript )
 
   function showmodal()
   {
     $("#modal").show();
   }
 
   function closemodal()
   {
     $("#modal").hide();
   }