Remove Bootstrap Modal backdrop outside modal area click in ASP.Net

Last Reply 4 months ago By dharmendr

Posted 5 months ago

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">&times;</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);
                }
         
            }
        }
    }
}

 

Posted 4 months ago

Refer below link to remove backdrop on Button click.

Remove Twitter Bootstrap Modal backdrop on Button click in ASP.Net