Hi Raj.73564,
Check with the below code. Call the ModalPopupExtender1.Show() method when you want to show the modal. I have called it on page load.
Refer the below article for details.
HTML
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$("#<%=txtSearch.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/Service.asmx/GetCustomers") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#<%=hfCustomerId.ClientID %>").val(i.item.val);
},
minLength: 1
});
});
</script>
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=90);
opacity: 0.8;
z-index: 10000;
}
.modalPopup
{
border-radius: 40px;
border-width: 0px;
border-style: solid;
border-color: Gray;
padding: 0px;
width: 400px;
height: 300px;
position: absolute;
top: 50px;
left: 300px;
}
.selected
{
background-color: Gray !important;
}
.hover_row
{
background-color: #E6E6FA;
}
</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<strong>Search Cars</strong> <a class="close" href="RegistrationEdit.aspx"><strong>View/Edit
Profile</strong></a>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-2">
<asp:DropDownList ID="DpdDestination" runat="server" class="dropdown form-control col-md-3 col-sm-6 text-center validate[required]"
Height="35px" Width="170px" AutoPostBack="true">
<asp:ListItem Selected="True">Select Destination</asp:ListItem>
<asp:ListItem>Archana</asp:ListItem>
<asp:ListItem>Okhla</asp:ListItem>
<asp:ListItem>Gurgaon</asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-lg-4">
<asp:TextBox ID="txt_Date" runat="server" CssClass="form-control" Enabled="True"
Width="353px" PlaceHolder="Date"></asp:TextBox>
</div>
<%-- <div class="col-lg-4">
<div class="form-group">
<div class="input-group col-lg-4 col-md-4">
<asp:TextBox ID="text_searchArea" runat="server" CssClass="form-control" Enabled="True"
placeholder="Search by Area" Width="353px"></asp:TextBox>
<asp:HiddenField ID="hfCustomerId" runat="server" />
<span class="input-group-btn ">
<asp:Button ID="btnsearch" runat="server" CssClass="btn btn-primary pull-right no-margin"
Text="Search" />
</span>
</div>
</div>
</div>--%>
<div class="col-lg-2">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<strong>Car Pool Information</strong>
<asp:Label ID="lblDay" runat="server" CssClass="label label-danger hidden" Style="text-align: center"></asp:Label>
<div class="PanelHeaderRight hidden">
<label class="radio-inline">
<asp:RadioButton ID="rdbEven" runat="server" Text="Even Cars" AutoPostBack="true" />
</label>
<label class="radio-inline">
<asp:RadioButton ID="rdbOdd" runat="server" Text="Odd Cars" AutoPostBack="true" />
</label>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="table-responsive">
<%--<asp:GridView ID="GridDetails" runat="server" AutoGenerateColumns="False" BackColor="White"
BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" class="table table-bordered footable"
CssClass="table table-bordered" data-filter="#filter" data-page-first-text="First"
data-page-last-text="Last" data-page-next-text="Next" data-page-previous-text="Prev"
data-page-size="25" DataKeyNames="Emp_Code" ForeColor="Black" GridLines="Vertical"
name="Grid-list" ShowFooter="True" Style="font-size: 14px;" Width="100%" AllowPaging="True"
PageSize="50" ShowHeaderWhenEmpty="True">
<FooterStyle BackColor="#CCCCCC" Font-Size="Larger" HorizontalAlign="Center" VerticalAlign="Middle" />
<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#424242" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#808080" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#383838" />
<AlternatingRowStyle BackColor="#CCCCCC" />
<Columns>
<asp:TemplateField HeaderText="S.No" ItemStyle-Width="50">
<ItemTemplate>
<asp:Label ID="lblRowNumber" runat="server" Text="<%# Container.DataItemIndex + 1 %>" />
</ItemTemplate>
<ItemStyle Width="50px" />
</asp:TemplateField>
<asp:BoundField DataField="Emp_Name" HeaderStyle-CssClass="visible-lg visible-md visible-xs"
HeaderText="Name" ItemStyle-CssClass="visible-lg visible-md visible-xs" ItemStyle-HorizontalAlign="Left">
<HeaderStyle CssClass="visible-lg visible-md visible-xs" />
<ItemStyle CssClass="visible-lg visible-md visible-xs" HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="Division" HeaderText="Division" HeaderStyle-CssClass="hidden-xs"
ItemStyle-CssClass="hidden-xs">
<HeaderStyle CssClass="hidden-xs" />
<ItemStyle CssClass="hidden-xs" />
</asp:BoundField>
<asp:BoundField DataField="CompleteAddress" HeaderText="Location" HeaderStyle-CssClass="hidden-xs"
ItemStyle-CssClass="hidden-xs">
<HeaderStyle CssClass="hidden-xs" />
<ItemStyle CssClass="hidden-xs" />
</asp:BoundField>
<asp:BoundField DataField="JourneyTime" HeaderText="journey Time"></asp:BoundField>
<asp:BoundField DataField="PhoneNo" HeaderStyle-CssClass="hidden-xs" HeaderText="Phone No."
ItemStyle-CssClass="hidden-xs">
<HeaderStyle CssClass="hidden-xs" />
<ItemStyle CssClass="hidden-xs" />
</asp:BoundField>
<asp:BoundField DataField="VehicleNo" HeaderStyle-CssClass="visible-lg visible-md"
HeaderText="Vehicle No." ItemStyle-CssClass="visible-lg visible-md hidden-xs">
<HeaderStyle CssClass="visible-lg visible-md hidden-xs" />
<ItemStyle CssClass="visible-lg visible-md hidden-xs" />
</asp:BoundField>
<asp:TemplateField HeaderText="Total / Available Seats" HeaderStyle-Width="130">
<ItemTemplate>
<%# String.Format("{0}/{1}", Eval("Total_Seats"), Eval("Avail_Seats"))%>
</ItemTemplate>
<HeaderStyle Width="130px" />
</asp:TemplateField>
<asp:BoundField DataField="Destination" HeaderText="Destination" />
<asp:TemplateField HeaderText="Request Status" ItemStyle-Width="50">
<ItemTemplate>
<asp:Image ID="imgIcons" runat="server" AlternateText="" ImageUrl='<%# Eval("IsApproved") %>'
CssClass="img-responsive img-circle" />
</ItemTemplate>
<ItemStyle Width="50px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Join Group" ItemStyle-Width="50">
<ItemTemplate>
<asp:ImageButton ID="btnlocation" runat="server" ImageAlign="Middle" ImageUrl="Images/hand.png"
CssClass="img-rounded" BorderColor="Transparent" CommandName="location" CommandArgument='<%# Eval("Emp_Code") %>' />
</ItemTemplate>
<ItemStyle Width="50px" />
</asp:TemplateField>
</Columns>
<EmptyDataRowStyle />
<EmptyDataTemplate>
<div class="alert alert-info">
No Record Found..!
</div>
</EmptyDataTemplate>
</asp:GridView>--%>
</div>
</div>
</div>
</div>
<asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup"
PopupControlID="pnlpopup" BehaviorID="ModalBehaviour" BackgroundCssClass="modalBackground" CancelControlID="btnClose">
</asp:ModalPopupExtender>
<asp:Panel ID="pnlpopup" runat="server" CssClass="modalPopup" BackColor="White" Height="400px"
Width="800px" Style="display: none; margin-right: 10px; position: fixed; left: 100;
top: 20;">
<div class="panel panel-primary">
<div class="panel-heading">
<strong>Choose Your Carpool Partner Near To Your Home</strong> <span class="right text-uppercase"
style="text-align: right; float: right">
<asp:Label ID="lblSendReqFrom" runat="server" Text=""></asp:Label>
</span>
</div>
<div id="Div3" style="margin-top: 5px" class="panel panel-default">
<div class="row">
<div class=" col-xs-12">
</div>
</div>
<div class="row">
<div class=" col-xs-2">
<strong>Search:</strong>
</div>
<div class=" col-xs-8">
<asp:TextBox ID="txtSearch" runat="server" CssClass="form-control" Enabled="True"
placeholder="Search by Area"></asp:TextBox>
</div>
<div class=" col-xs-1">
<asp:Button ID="btnSubmit" runat="server" CssClass="btn btn-primary pull-right no-margin"
Text="Submit" />
<asp:HiddenField ID="hfCustomerId" runat="server" />
</div>
</div>
<div class="row">
<div class=" col-xs-12">
</div>
</div>
<div class="footer" align="right">
<asp:Button ID="btnClose" runat="server" Text="Close" CssClass="button" />
</div>
<div class="row">
<div class=" col-xs-12">
<div class="form-group">
<div class="col-lg-12 col-md-12">
<div class="table-responsive">
<%--<asp:GridView ID="GridPopUp" runat="server" AutoGenerateColumns="False" BackColor="White"
BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" class="table table-bordered footable"
CssClass="table table-bordered" data-filter="#filter" data-page-first-text="First"
data-page-last-text="Last" data-page-next-text="Next" data-page-previous-text="Prev"
data-page-size="25" DataKeyNames="Emp_Code" ForeColor="Black" GridLines="Vertical"
name="Grid-list" ShowFooter="True" Style="font-size: 14px;" Width="100%" AllowPaging="True"
PageSize="50">
<FooterStyle BackColor="#CCCCCC" Font-Size="Larger" HorizontalAlign="Center" VerticalAlign="Middle" />
<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#808080" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#383838" />
<AlternatingRowStyle BackColor="#CCCCCC" />
<Columns>
<asp:TemplateField HeaderText="Request" ItemStyle-Width="50">
<ItemTemplate>
<asp:CheckBox ID="Chbxrequest" runat="server" Checked='<%# Eval("IsChecked") %>' />
</ItemTemplate>
<ItemStyle Width="50px" />
</asp:TemplateField>
<asp:BoundField DataField="Emp_Name" HeaderStyle-CssClass="visible-lg visible-md visible-xs"
HeaderText="Name" ItemStyle-CssClass="visible-lg visible-md visible-xs" ItemStyle-HorizontalAlign="Left">
<HeaderStyle CssClass="visible-lg visible-md visible-xs" />
<ItemStyle CssClass="visible-lg visible-md visible-xs" HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="Division" HeaderText="Division" HeaderStyle-CssClass="hidden-xs"
ItemStyle-CssClass="hidden-xs">
<HeaderStyle CssClass="hidden-xs" />
<ItemStyle CssClass="hidden-xs" />
</asp:BoundField>
<asp:BoundField DataField="CompleteAddress" HeaderText="Location" HeaderStyle-CssClass="hidden-xs"
ItemStyle-CssClass="hidden-xs">
<HeaderStyle CssClass="hidden-xs" />
<ItemStyle CssClass="hidden-xs" />
</asp:BoundField>
<asp:BoundField DataField="JourneyTime" HeaderText="journey Time"></asp:BoundField>
<asp:BoundField DataField="Destination" HeaderText="Destination" />
<asp:BoundField DataField="PhoneNo" HeaderStyle-CssClass="hidden-xs" HeaderText="Phone No."
ItemStyle-CssClass="hidden-xs">
<HeaderStyle CssClass="hidden-xs" />
<ItemStyle CssClass="hidden-xs" />
</asp:BoundField>
<asp:TemplateField HeaderText="Request Status" ItemStyle-Width="50">
<ItemTemplate>
<asp:Image ID="imgIcons" runat="server" AlternateText="" ImageUrl='<%# Eval("IsApproved") %>'
CssClass="img-responsive img-circle" />
</ItemTemplate>
<ItemStyle Width="50px" />
</asp:TemplateField>
</Columns>
<EmptyDataRowStyle />
<EmptyDataTemplate>
<div class="alert alert-info">
No Record Found..!
</div>
</EmptyDataTemplate>
</asp:GridView>--%>
<div class=" col-xs-12">
<div class="form-group">
<asp:TextBox ID="txtRemark" runat="server" CssClass="form-control" Enabled="True"
placeholder="Type your message here"></asp:TextBox>
</div>
</div>
<div class=" col-xs-12">
<div class="form-group">
<div class="input-group">
<asp:Button ID="btnUpdate" runat="server" ForeColor="Black" CssClass="btn btn-info"
CommandName="Update" Font-Bold="true" Text="Send Request" />
<asp:Button ID="btnCancel" runat="server" Font-Bold="true" ForeColor="Black" CssClass="btn btn-danger"
Text="Quit" />
<asp:HiddenField ID="HiddenField1" runat="server"></asp:HiddenField>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</asp:Panel>
</div>
</a>
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<%--<asp:AsyncPostBackTrigger ControlID="btnsearch" EventName="Click" />--%>
<asp:AsyncPostBackTrigger ControlID="DpdDestination" EventName="SelectedIndexChanged" />
<asp:AsyncPostBackTrigger ControlID="rdbEven" EventName="CheckedChanged" />
<asp:AsyncPostBackTrigger ControlID="rdbOdd" EventName="CheckedChanged" />
<asp:AsyncPostBackTrigger ControlID="btnUpdate" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnCancel" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<%--<script type="text/javascript">
$(function () {
$("[id*=GridDetails] td").hover(function () {
$("td", $(this).closest("tr")).addClass("hover_row");
}, function () {
$("td", $(this).closest("tr")).removeClass("hover_row");
});
});
$('[id*=btnlocation]').click(function () {
$('#<%=GridDetails.ClientID%> tr').removeClass("selected");
$(this).addClass("selected");
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=GridDetails.ClientID %>').Scrollable();
});
$(document).ready(function () {
$('#<%=GridDetails.ClientID %>').Scrollable({
ScrollHeight: 600,
IsInUpdatePanel: true
});
});
</script>--%>
<script type="text/javascript">
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
// adding handler to the document's keydown event
$addHandler(document, "keydown", onKeyDown);
}
}
function onKeyDown(e) {
if (e && e.keyCode == Sys.UI.Key.esc) {
// if the key pressed is the escape key, then close the dialog
$find('#<%=ModalPopupExtender1.ClientID %>').hide();
}
}
</script>
</asp:Content>
Code
protected void Page_Load(object sender, EventArgs e)
{
ModalPopupExtender1.Show();
}
Screenshot
