模态弹出窗口不显示
[英]The modal popup is not showing up
问题描述
我正在完成我的最后一年的项目，我需要使用带有模型弹出窗口的网格视图，但是每当我单击添加按钮都无法正常工作时。 任何人都可以帮助我，我尝试了很多次，并且在5个小时内没有任何问题。以下是我的html和后端代码。谢谢。 当我单击按钮时，什么都没有显示。
我非常感谢您的帮助。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <!----Required Head met tags ----> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!----The Title ----> <link rel="shortcut icon" href="img/favicon.ico" /> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <form id="form1" runat="server"> <div style="width: 90%; margin-right: 5%; margin-left: 5%; text-align: center"> <asp:ScriptManager runat="server" ID="ScriptManager1" /> <h3 style="text-align: center;">Manage Users </h3> <!-- Placing GridView in UpdatePanel--> <asp:UpdatePanel ID="upCrudGrid" runat="server"> <ContentTemplate> <asp:GridView ID="GridView1" runat="server" Width="940px" HorizontalAlign="Center" OnRowCommand="GridView1_RowCommand" AutoGenerateColumns="false" AllowPaging="true" DataKeyNames="Id" CssClass="table table-hover table-striped"> <Columns> <asp:ButtonField CommandName="detail" ControlStyle-CssClass="btn btn-info" ButtonType="Button" Text="Detail" HeaderText="Detailed View"> <ControlStyle CssClass="btn btn-info"></ControlStyle> </asp:ButtonField> <asp:ButtonField CommandName="editRecord" ControlStyle-CssClass="btn btn-info" ButtonType="Button" Text="Edit" HeaderText="Edit Record"> <ControlStyle CssClass="btn btn-info"></ControlStyle> </asp:ButtonField> <asp:ButtonField CommandName="deleteRecord" ControlStyle-CssClass="btn btn-info" ButtonType="Button" Text="Delete" HeaderText="Delete Record"> <ControlStyle CssClass="btn btn-info"></ControlStyle> </asp:ButtonField> <asp:BoundField DataField="Username" HeaderText="Username" /> <asp:BoundField DataField="Password" HeaderText="Password" /> <asp:BoundField DataField="Email" HeaderText="Email" /> <asp:BoundField DataField="Address" HeaderText="Address" /> <asp:BoundField DataField="UserType" HeaderText="UserType" /> </Columns> </asp:GridView> <asp:Button ID="btnAdd" runat="server" Text="Add New Record" CssClass="btn btn-info" OnClick="btnAdd_Click" /> </ContentTemplate> <Triggers> </Triggers> </asp:UpdatePanel> <div id="editModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> <h3 id="editModalLabel">Edit Record</h3> </div> <asp:UpdatePanel ID="upEdit" runat="server"> <ContentTemplate> <div class="modal-body"> <table class="table"> <tr> <td>Username : <asp:Label ID="tbUsername" runat="server"></asp:Label> </td> </tr> <tr> <td> Password : <asp:TextBox ID="tbPassword" runat="server" Width="193px"></asp:TextBox> </td> </tr> <tr> <td>Email: <asp:TextBox ID="tbEmail" runat="server" style="margin-left: 1px" Width="131px"></asp:TextBox> </td> </tr> <tr> <td>Address: <asp:TextBox ID="tbAddress" runat="server" Width="148px"></asp:TextBox> </td> </tr> <tr> <td>UserType: <asp:TextBox ID="tbUserType" runat="server" Width="150px"></asp:TextBox> </td> </tr> </table> </div> <div class="modal-footer"> <asp:Label ID="lblResult" Visible="false" runat="server"></asp:Label> <asp:Button ID="btnSave" runat="server" Text="Update" CssClass="btn btn-info" OnClick="btnSave_Click" /> <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="GridView1" EventName="RowCommand" /> <asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" /> </Triggers> </asp:UpdatePanel> </div> </div> <footer> <div class="container"> <p class="pull-right"><a href="#">Back to top</a></p> <p>© 2018 E-Bus ticketing system · <a href="Default.aspx">Home</a> · <a href="#">Update Schedule</a> · <a href="#">Manage Users</a> · <a href="#">Upload Tickets</a></p> </div> </footer> </form> </body> </html>
1 个解决方案
解决方案1
0 2018-08-14 20:01:52
您可以通过数据属性触发，即
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
// ...html
</div>
或使用jQuery即
$('#myModal').modal('show') //Open
Popup Modal内部的内容未显示
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.