如何从代码隐藏关闭引导模式
how to close bootstrap modal from code behind?
我正在从模态进行更新操作。当模态弹出时，它加载了我要更新的特定行数据。以下是我的模态代码：
<form id="form1" runat="server">
<asp:ScriptManager ID="sm1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="myModal" class="modal fade" role="dialog" runat="server" draggable="auto">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Insert Module</h4>
</div>
<div class="modal-body">
<table class="table table-bordered">
<thead>
<tr>
<td colspan="2" style="text-align: center">
<label>UPDATE EMPLOYEE DETAIL</label>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>FIRST NAME</label>
</td>
<td>
<asp:TextBox ID="up_tb1" runat="server"></asp:TextBox>
<ajax:filteredtextboxextender id="FilteredTextBoxExtender7" targetcontrolid="up_tb1" filtertype="UppercaseLetters,LowercaseLetters" runat="server"></ajax:filteredtextboxextender>
</td>
</tr>
<tr>
<td>
<label>MIDDLE NAME</label>
</td>
<td>
<asp:TextBox ID="up_tb2" runat="server"></asp:TextBox>
<ajax:filteredtextboxextender id="FilteredTextBoxExtender8" targetcontrolid="up_tb2" filtertype="UppercaseLetters,LowercaseLetters" runat="server"></ajax:filteredtextboxextender>
</td>
</tr>
<tr>
<td>
<label>LAST NAME</label>
</td>
<td>
<asp:TextBox ID="up_tb3" runat="server"></asp:TextBox>
<ajax:filteredtextboxextender id="FilteredTextBoxExtender9" targetcontrolid="up_tb3" filtertype="UppercaseLetters,LowercaseLetters" runat="server"></ajax:filteredtextboxextender>
</td>
</tr>
<tr>
<td>
<label>EMAIL</label>
</td>
<td>
<asp:TextBox ID="up_tb4" runat="server"></asp:TextBox>
<ajax:filteredtextboxextender id="FilteredTextBoxExtender10" targetcontrolid="up_tb4" filtertype="Numbers, LowercaseLetters, Custom" validchars=".@" runat="server"></ajax:filteredtextboxextender>
</td>
</tr>
<tr>
<td>
<label>DOB</label>
</td>
<td>
<asp:TextBox ID="up_tb5" runat="server" Enabled="false"></asp:TextBox>
<ajax:calendarextender id="CalendarExtender2" runat="server" popupbuttonid="ImageButton1" targetcontrolid="up_tb5"></ajax:calendarextender>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/img/calendar146.png" Width="16px" Height="16px" />
</td>
</tr>
<tr>
<td>
<label>USERNAME</label>
</td>
<td>
<asp:TextBox ID="up_tb6" runat="server"></asp:TextBox>
<ajax:filteredtextboxextender id="FilteredTextBoxExtender12" targetcontrolid="up_tb6" filtertype="Numbers, LowercaseLetters, Custom" validchars=".@" runat="server"></ajax:filteredtextboxextender>
</td>
</tr>
<tr>
<td>
<label>PASSWORD</label>
</td>
<td>
<asp:TextBox ID="up_tb7" runat="server" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="up_tb8" CssClass="btn btn-success" runat="server" Text="UPDATE" OnClick="up_tb8_Click" />
</td>
</tr>
</tbody>
</table>
<asp:ValidationSummary ID="ValidationSummary2" runat="server"
DisplayMode="BulletList" ShowSummary="true" HeaderText="Errors:" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
我正在从代码隐藏加载模态并从代码隐藏填充其字段。下面是我的代码隐藏代码：
protected void up_tb8_Click(object sender, EventArgs e)
{
var db = new dbDataContext();
Employee emp = new Employee();
db.Sp_Updatevalue(up_id, up_tb1.Text, up_tb2.Text, up_tb3.Text, up_tb4.Text, Convert.ToDateTime(up_tb5.Text), up_tb6.Text, up_tb7.Text);
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "ClosePopup();", true);
}
当我单击我的更新按钮时，它成功地运行了我的更新存储过程并从数据库更新值。问题是当数据更新模式弹出窗口消失时，但其暗灰色背景仍然固定在我的屏幕上，我想在我的记录更新并且我的网格视图刷新并显示我更新的记录时正确关闭模式。
如果用户控件 （ascx） 包装在模态内，则：
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$('#myModal').modal('hide');", true);
将不起作用。而不是这个，你应该使用它。页 .
正确的解决方案：
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "Pop", "$('#myModal').modal('hide');", true);
你可以试试这个：
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "#myModal", "$('body').removeClass('modal-open');$('.modal-backdrop').remove();$('#myModal').hide();", true);
它对我有用..！
您可以更改服务器按钮 -
<asp:Button ID="up_tb8" CssClass="btn btn-success" runat="server" Text="UPDATE" OnClick="up_tb8_Click" />
像这样的东西——
<button id="up_tb8" type="button" class="btn btn-default" data-dismiss="modal" runat="server" onserverclick="up_tb8_Click">UPDATE</button>
希望这会起作用
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "#myModal1", "$('body').removeClass('modal-open');$('.modal-backdrop').remove();", true);这段代码工作得很好...
C# ：
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ModalHide", "$('body').removeClass('modal-open');$('.modal-backdrop').remove();$('#Div3').hide();", true);
VB.Net：
ScriptManager.RegisterStartupScript(me, me.GetType(), "ModalHide", "$('body').removeClass('modal-open');$('.modal-backdrop').remove();$('#Div3').hide();", true)
你可以试试这个：
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$('#myModal').modal('hide');", true);
或者，您可以在JS文件中定义一个ClosePopup函数来执行此操作，然后像执行时一样调用它。
function ClosePopup(){
$('#myModal').modal('hide');
}
我的应用程序中也有类似的东西。我通过在单击按钮时重新绑定数据库中的数据来刷新网格。在 javascript closepopup() 函数中，关闭模态后，我调用按钮单击事件，该事件将刷新我的数据网格。您可以创建一个用于绑定的隐藏按钮并像我一样执行单击事件。
一些代码示例：
这是刷新按钮：
<asp:Button ID="btnClearFilter" runat="server" Text="Refresh" onclick="btnClearFilter_Click" />
代码隐藏：
protected void btnClearFilter_Click(object sender, EventArgs e)
{
FillGrid(); //here I bind to datagrid
}
当弹出窗口关闭时：
function closepopup() {
$find('thisModalPopupExtender').hide();
document.getElementById("<%= btnClearFilter.ClientID %>").click(); //click event on refresh button
}
不是最好的解决方案，但它:)
将 Id 属性和 runat="server" 添加到关闭按钮。
在 C# 代码隐藏中，
btnId1.Attributes.Add("class", "close");
这里 btnId1 是关闭按钮的 Id 名称。
相关文章：
- Bootstrap在页面加载缓慢时会立即显示隐藏的模式对话框
- Codemirror:将特定的基于模式的文本隐藏到编辑器中
- 如何在模式窗口弹出窗口中隐藏滚动条
- 在引导程序中单击关闭时隐藏模式
- 关闭模式覆盖时无法隐藏消息框
- 视频通过javascript被隐藏，但已经开始播放(自动播放模式），即使是's不可见
- 从日期选择器引导框中选择日期后，模式隐藏
- jquery ui模式框中的表单隐藏后，键盘将不再被调用
- 如何将自定义隐藏/关闭链接添加到使用 lightbox2 显示的模式框
- HTML5网站在丝绸浏览器中进入全屏模式或在加载URL后在丝绸浏览器中隐藏地址栏
- 带有代码隐藏的 Jquery 模式
- 可靠地隐藏引导模式
- Jquery，Bootstrap-触发模式隐藏上的点击事件，并在输入中选择文本
- 如何在模式隐藏或关闭时重置窗体
- Twitter引导程序模式隐藏事件只触发一次
- 引导激活选项卡上的模式隐藏
- 模式隐藏时滚动条未恢复
- 引导模式隐藏方法-没有事件的沉默
- 移动滚动日期选择器被jQuery移动模式隐藏
- 引导 3 - 当模式隐藏时，它会隐藏内容
