Hi modal popup not working, i need to open modal pop up inside a panel, below is my html: senerio goes as :
on page load on only panel with id="pnlgrid" is visible and button with id btnaddnew is visible on clicking addnewbutton pnl grid is visble false and panel with id=pnlFormEdit is visible true.
Inside there is linkbutton1 on which click i want to open popup. but on clicking it goes postback. anyone please help.
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="DutySlip.aspx.vb" Inherits="_DutySlip" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<style type="text/css">
.chosen-container {
width: 250px !important;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<!-- begin breadcrumb -->
<ol class="breadcrumb pull-right">
<li><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">DutySlip</a></li>
</ol>
<!-- end breadcrumb -->
<!-- begin page-header -->
<h1 class="page-header">Create Duty Slip</h1>
<!-- end page-header -->
<!-- begin row -->
<div class="row">
<asp:Button ID="btnAddNew" runat="server" CausesValidation="False" class="btn btn-sm btn-success"
Text="Create Duty Slip " TabIndex="0"></asp:Button>
<asp:Image ID="imgWarn" runat="server" Visible="False" ImageUrl="~/images/warn.gif"
ImageAlign="AbsMiddle"></asp:Image> <asp:Label ID="lblMsg" runat="server"
Font-Bold="True" Height="14px" Width="493px" ForeColor="Red"></asp:Label>
</div>
<br />
<asp:Panel ID="pnlFormEdit" runat="server" Visible="False">
<div class="row">
<!-- begin col-12 -->
<div class="col-md-12">
<!-- begin panel -->
<div class="panel panel-inverse" data-sortable-id="form-stuff-1">
<div class="panel-heading">
<div class="panel-heading-btn">
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
</div>
<h4 class="panel-title">Create DutySlip</h4>
</div>
<div class="panel-body">
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label">Select Customer</label>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="col-md-4">
<asp:DropDownList ID="cmbCustomer" runat="server" data-placeholder="Choose a Country..." class="chosen-select" AutoPostBack="True" TabIndex="1">
</asp:DropDownList>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
<asp:UpdatePanel ID="upUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="col-md-4">
<asp:TextBox ID="txtCustDetails" runat="server" TextMode="MultiLine" class="form-control input-sm " Height="70px"></asp:TextBox>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="cmbCustomer" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
<div class="form-group">
<label class="col-md-2 control-label"></label>
<div class="col-md-10">
<asp:Button ID="btnSubmit" TabIndex="24" runat="server" class="btn btn-sm btn-success" Visible="False" type="submit"
Width="104px" Text="Save"></asp:Button>
<asp:Button ID="btnCancel" TabIndex="25" runat="server" class="btn btn-sm btn-default" Visible="False" type="submit"
Width="71px" CausesValidation="False" Text="Cancel"></asp:Button>
</div>
</div>
</div>
</div>
</div>
<!-- end panel -->
</div>
</div>
<!-- ModalPopupExtender -->
<cc1:modalpopupextender id="mp1" runat="server" popupcontrolid="Panel1" targetcontrolid="LinkButton1"
cancelcontrolid="btnClose" backgroundcssclass="modalBackground">
</cc1:modalpopupextender>
<asp:Panel ID="Panel1" runat="server" align="center" Style="display: none">
This is an ASP.Net AJAX ModalPopupExtender Example<br />
<asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
<!-- ModalPopupExtender -->
</asp:Panel>
<div class="row">
<!-- begin col-12 -->
<asp:Panel ID="pnlgrid" runat="server" Visible="False">
<div class="col-md-12">
<!-- begin panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
</div>
<h4 class="panel-title">Last 5 DutySlip Details</h4>
</div>
<div class="panel-body">
<br />
<br />
<div class="form-group">
<asp:Label ID="lbl" runat="server" CssClass="txt" Width="162px"></asp:Label>
<asp:GridView ID="gridData" runat="server" AutoGenerateColumns="False" DataKeyNames="DutyID" class="table table-striped table-bordered"
Visible="False" AllowPaging="true" PageSize="5" OnPageIndexChanging="OnPaging" PagerStyle-CssClass="gridfooter">
<Columns>
<asp:ButtonField ButtonType="Image" CommandName="SELECT" HeaderText="Edit" ImageUrl="~/images/edit.png">
<ItemStyle Width="1px" />
<HeaderStyle Width="1px" ForeColor="Green" />
</asp:ButtonField>
<asp:BoundField DataField="DutySlipNo" HeaderText="Duty Slip Number">
<HeaderStyle HorizontalAlign="Left" Wrap="false " />
</asp:BoundField>
</Columns>
<PagerSettings PageButtonCount="15" />
<PagerStyle CssClass="gridfooter"></PagerStyle>
</asp:GridView>
<div />
</div>
</div>
</div>
</asp:Panel>
</div>
</asp:Content>
