<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Example.aspx.cs" Inherits="Example" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script> <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" /> <style> .btn_styling { text-align: center; width: 32px; margin: 2px; cursor: pointer; border: 1px solid gray; border-radius: 3px; /* add a background image to the div to make the div look like a button */ /* background-image: url('...') */ } .ui-dialog-titlebar-close { display: none; } </style> <title></title> <script type="text/javascript"> var dialogOptions = { autoOpen: false, appendTo: "#dialogContainer", modal: true, height: "auto", width: "auto", title: "Dialog Title", closeOnEscape: true, show: { effect: "fold", duration: 4000 }, buttons: { Cancel: function () { $(this).remove(); } } }; $(".ui-widget-overlay").live("click", function () { $("div:ui-dialog:visible").dialog("close"); }); $(document).on("click", ".dialog-marker", function () { var d = $(this).next("div").first().dialog(dialogOptions); d.dialog("open"); }); </script> </head> <body> <form id="form1" runat="server"> <div style="width: 400px;"> <asp:GridView ID="GridView1" OnRowDataBound="GridView1_RowDataBound" runat="server" AutoGenerateColumns="False" DataKeyNames="BusNo" DataSourceID="SqlDataSource1"> <columns> <asp:BoundField DataField="RouteName" HeaderText="RouteName" SortExpression="RouteName" /> <asp:TemplateField HeaderText="Info"> <itemtemplate> <div id="divButton" runat="server" class="btn_styling dialog-marker" title="This could also have been a <button> element or maybe an <img> element...anything really">X</itemtemplate></columns></div> <div id="popup" style="display: none;"> <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource2"> <columns> <asp:BoundField DataField="StopName" HeaderText="StopName" SortExpression="StopName" /> </columns> <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:constr %>" SelectCommand="SELECT StopName from BusStops WHERE (BusNo = @BusNo)"> <SelectParameters> <asp:Parameter Name="BusNo" /> </SelectParameters> </div> <rowstyle bordercolor="Blue" borderstyle="Solid" borderwidth="1px" /> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:constr %>" SelectCommand="SELECT BusNo,RouteName from BusRoutes"> <div id="dialogContainer"> </div> </form> </body> </html>
Cancel: function () { $(this).hide(); $(this).close(); }
$('#divSummary').modal('show');
$('#divSummary').modal('hide');
data-dismiss="modal"
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)