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

Last Reply 25 days ago By dharmendr

Posted one month 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 25 days ago

Refer below link to remove backdrop on Button click.

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