Design:
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="BootstrapModal.aspx.cs"
Inherits="BootstrapModal_ASPNET.BootstrapModal"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button"
class="btn
btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!--ASP.NET Button -->
<asp:Button ID="btnOpenModal"
runat="server"
CssClass="btn
btn-info btn-lg" Text="Open with ASP Button" onclick="btnOpenModal_Click"
/>
<!-- Modal -->
<div class="modal fade"
id="myModal"
role="dialog">
<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">Modal
Header</h4>
</div>
<div
class="modal-body">
<p>Some text in the modal.</p>
</div>
<div
class="modal-footer">
<button
type="button"
class="btn
btn-default" data-dismiss="modal">Close</button>
<asp:Button ID="btnCloseModal"
CssClass="btn
btn-default" runat="server"
Text="Close &
Reopen"
onclick="btnCloseModal_Click"
/>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Code Behind:
protected void
btnOpenModal_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(Page,
Page.GetType(), "myModal", "$('#myModal').modal();", true);
}
protected void
btnCloseModal_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(Page,
Page.GetType(), "myModalHide", "$('#myModal').hide();", true);
ScriptManager.RegisterStartupScript(Page,
Page.GetType(), "myModalAgainShow",
"$('#myModal').modal();", true);
}
Note : If sometime we want to hide parent modal and want to show child modal then we have to add following code to hide Modal.
and If bootstrap modal-backdrop doesn't disappear
ScriptManager.RegisterStartupScript(Page,Page.GetType(), "myModalHide", "$('body').removeClass('modal-open');$('.modal-backdrop').remove();$('#myModal').hide();", true);
Outoput:
No comments:
Post a Comment