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(); } |