bootstrap modal popup loaded with search textbox and button. After clicking button, Gridview loaded with search result as expected within modal window.But after result is loaded, when i click anywhere outside the modal, entire page is faded and greyed out.
I am adding my code flow with master page.
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="searchsamplemodal.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Demo page</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
</head>
<body>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<script src="jquery/jquery.min.js"></script>
<%-- <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>--%>
<%-- <script src="jquery/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>--%>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
function openModal() {
$('[id*=popModal]').modal({
backdrop: 'static',
keyboard: false
});
}
</script>
</body>
</html>
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" EnableEventValidation="false" Inherits="searchsamplemodal.WebForm1" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<form method="post" action="" id="myForm" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="container">
<a href="#" data-target="#popModal" data-toggle="modal" class="btn btn-warning">Search Records</a>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-- Modal -->
<asp:Label ID="Label1" runat="server" Text=""></asp:Label><br />
<div class="modal fade" id="popModal" tabindex="-1" role="dialog" style="overflow:hidden" aria-labelledby="popModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="popModalLabel">
Search Users</h4>
</div>
<div class="modal-body">
<form id="inputform" action="#" method="post">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<asp:TextBox ID="txtEID" runat="server" placeholder="EID:" class="form-control"></asp:TextBox>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<asp:TextBox ID="txtEName" runat="server" placeholder="E NAME:" class="form-control"></asp:TextBox>
</div>
</div>
</div>
</form>
<asp:Button ID="btnNameSearch" CssClass="btn btn-primary" Text="Search" UseSubmitBehavior="false" OnClick="btnNameSearch_Click" runat="server" />
</div>
<div class="modal-footer">
<div style="width: 75%; height: 300px; overflow: scroll;">
<asp:GridView ID="gvEmployee" runat="server" ViewStateMode="Enabled" DataKeyNames="srid" AutoGenerateColumns="false" CssClass="table table-hover" GridLines="None">
<Columns>
<asp:BoundField DataField="eid" HeaderText="EID" />
<asp:BoundField DataField="ename" HeaderText="EName" />
</Columns>
<HeaderStyle BackColor="LightCoral" ForeColor="White"></HeaderStyle>
</asp:GridView>
</div>
<div class="dl-horizontal">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</asp:Content>
namespace searchsamplemodal
{
public partial class WebForm1 : System.Web.UI.Page
{
ClsBusinessLayer objBAL = new ClsBusinessLayer();
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnNameSearch_Click(object sender, EventArgs e)
{
if (IsValid)
{
if (txtEID.Text == "" && txtEName.Text == "")
{
var dsEmployees = (DataSet)objBAL.LoadEmployees(txtEID.Text, txtEName.Text);
gvEmployee.DataSource = dsEmployees.Tables[0];
gvEmployee.DataBind();
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$(function() { openModal(); });", true);
}
else if (txtEID.Text == "" && txtEName.Text != "")
{
var dsEmployees = (DataSet)objBAL.LoadEmployees(txtEID.Text, skey);
gvEmployee.DataSource = dsEmployees.Tables[0];
gvEmployee.DataBind();
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$(function() { openModal(); });", true);
}
else
{
var dsEmployees = (DataSet)objBAL.LoadEmployees(txtEID.Text, txtEName.Text);
gvEmployee.DataSource = dsEmployees.Tables[0];
gvEmployee.DataBind();
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$(function() { openModal(); });", true);
}
}
}
}
}
