Hi ahmadsubuhanl...,
You need to set the dropdownParent property to the id of the Panel control.
Refer below code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
.modalBackground { background-color: Black; filter: alpha(opacity=40); opacity: 0.4; }
.modalPopup { background-color: #FFFFFF; width: 460px; border: 3px solid #0DA9D0; }
.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; padding: 5px; }
.modalPopup .footer { padding: 3px; }
.modalPopup .button { height: 23px; color: White; line-height: 23px; text-align: center; font-weight: bold; cursor: pointer; background-color: #9F9F9F; border: 1px solid #5C5C5C; }
.modalPopup td { text-align: left; }
.form-control { width: 200px !important; }
.select2-selection__rendered { font-size: small !important; }
.select2-results__option { font-size: large !important; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script type="text/javascript">
$(function () {
$(".js-example-placeholder-single").select2({
placeholder: "Select",
allowClear: true,
dropdownParent: $('#pnlPopup'),
width: 200
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:LinkButton Text="" ID="lnkFake" runat="server" />
<cc1:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlPopup" TargetControlID="lnkFake"
CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" align="center" Style="display: none">
<div class="header">
New Loan
</div>
<div class="body">
<table border="0" width="450" cellpadding="0" cellspacing="0">
<tr>
<td>
<asp:Label ID="Label7" runat="server" Font-Names="Calibri" Font-Size="Smaller" Style="text-align: right"
Text="Jenis Pinjaman:"></asp:Label>
</td>
<td width="10">
</td>
<td style="text-align: left">
<asp:DropDownList ID="ddlCustomers" runat="server" CssClass="js-example-placeholder-single">
<asp:ListItem Text="--Select Customer--" Value="0" />
<asp:ListItem Text="John Hammond" Value="1" />
<asp:ListItem Text="Mudassar Khan" Value="2" />
<asp:ListItem Text="Suzanne Mathews" Value="3" />
<asp:ListItem Text="Robert Schidner" Value="4" />
</asp:DropDownList>
</td>
</tr>
</table>
</div>
<div class="footer" align="right">
<asp:Button ID="btnClose" runat="server" CssClass="button button3" Text="Close" ToolTip="Close" />
<asp:Button ID="Button3" runat="server" Text="Save" ToolTip="Save" CssClass="button button2" />
</div>
</asp:Panel>
</form>
</body>
</html>
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
mpe.Show();
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
mpe.Show()
End Sub
Screenshot
