引导模式不断消失



我一直在尝试在单击按钮后显示模态。问题是模态弹出,但随后自动关闭。我只链接了两个js文件,它们是head部分中的bootstrap.js和jquery.js。

这是我的头部:

<head runat="server">
<title></title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="vendor/jquery/jquery.js"></script>
<script src="vendor/bootstrap/js/bootstrap.js"></script>

这是按钮的代码:

<asp:Button ID="btn1" runat ="server" data-toggle="modal" data-target="#PopupBookForm"/>

这就是模式:

<div class="modal" id="PopupBookForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Event Form</h3>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<div class="form-group ">
<asp:Label runat="server" Text="Meeting Title :"></asp:Label><br />
<asp:TextBox type="text" ID="meetTitle" class="form-control" runat="server"></asp:TextBox>
<br />
<asp:Label runat="server" Text="Date of Meeting :"></asp:Label><br />
<asp:TextBox type="text" ID="meetDate" class="form-control" runat="server"></asp:TextBox>
<br/>
<div class="form-inline">
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Meeting Start :"></asp:Label><br />
<asp:TextBox type="text" ID="meetStart" class="form-control" runat="server"></asp:TextBox>
</div>
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Meeting End :"></asp:Label><br />
<asp:TextBox type="text" ID="meetEnd" class="form-control" runat="server"></asp:TextBox>
</div>
</div>
<br />
<div class="form-inline">
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Plant :"></asp:Label>
<select ID="plantDropDown"  class="form-control" style="width:200px">
<option value="" disabled selected hidden>Select Plant</option>
</select>
</div>
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Room :"></asp:Label>
<select id="roomDropDown" class="form-control"  style="width:200px">
<option value="" disabled selected hidden>Select Room</option>
</select>
</div>
</div>
<br />
<asp:Label runat="server" Text="Meeting Description :"></asp:Label><br />
<asp:TextBox type="text" ID="meetDesc" class="form-control" runat="server" Textmode="multiline" Columns="50" Rows="5"></asp:TextBox>
<br />
<asp:Label runat="server" Text="Employee ID :"></asp:Label><br />
<asp:TextBox type="text" ID="empID" class="form-control" runat="server"></asp:TextBox>
<br />
</div>
</div>
<div class="modal-footer">
<asp:Button ID="BtnPopupCancel" CssClass="btn" runat="server" Text="Cancel"/>
<asp:Button ID="BtnPopupSave" CssClass="btn btn-outline-success" runat="server" Text="Save" />
</div>
</div>
</div>
</div>

非常感谢!

ASP。NET Webforms根据控件类型为其控件生成自定义HTML,并可能覆盖像onclick。。。

除非需要在后端访问ASP控件,否则不应使用它们。

尝试使用一个简单的html元素:

<button type="button" data-toggle="modal" data-target="#PopupBookForm">
Launch demo modal
</button>

最新更新