Hi salini,
Please refer below sample.
for show hide refer below article
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.modalBackground
{
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
}
.modalPopup
{
background-color: #FFFFFF;
width: 300px;
border: 3px solid #0DA9D0;
padding: 0;
}
.modalPopup .header
{
background-color: #2FBDF1;
height: 30px;
color: White;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.modalPopup .body
{
min-height: 50px;
line-height: 30px;
text-align: center;
font-weight: bold;
margin-bottom: 5px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<asp:Button ID="btnShow" runat="server" Text="Show Modal Popup1"></asp:Button>
<asp:Button ID="btnShow1" runat="server" Text="Show Modal Popup2"></asp:Button>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
PopupControlID="pnlPopup" TargetControlID="btnShow" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<cc1:ModalPopupExtender ID="ModalPopupExtender2" BehaviorID="mpe1" runat="server"
PopupControlID="pnlPopup" TargetControlID="btnShow1" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
<div class="header">
Modal Popup
</div>
<div class="body">
This is a Modal Popup.
<br />
(Click outside Modal Popup to close it)
</div>
</asp:Panel>
<script type="text/javascript">
function pageLoad() {
var modalPopup = $find('mpe');
var modalPopup1 = $find('mpe1');
modalPopup.add_shown(function () {
modalPopup._backgroundElement.addEventListener("click", function () {
modalPopup.hide();
});
});
modalPopup1.add_shown(function () {
modalPopup1._backgroundElement.addEventListener("click", function () {
modalPopup1.hide();
});
});
};
</script>
</form>
</body>
</html>
Screenshot
