Hi arvindasp,
Refer below sample code.
You need to make use of data-bs attribute and call the new bootstrap.Modal function for opening the popup.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- Bootstrap -->
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap -->
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<center>
<button type="button" class="btn btn-info btn-lg" data-bs-toggle="modal" data-bs-target="#MyPopup">
Open Modal</button>
</center>
<!-- Modal Popup -->
<div id="MyPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-bs-dismiss="modal">
×</button>
<h4 class="modal-title">Select Fruit
</h4>
</div>
<div class="modal-body">
<asp:DropDownList ID="ddlFruits" runat="server" AutoPostBack="true" OnSelectedIndexChanged="OnSelectedIndexChanged">
<asp:ListItem Text="Select Fruit" Value="0" />
<asp:ListItem Text="Mango" Value="1" />
<asp:ListItem Text="Apple" Value="2" />
<asp:ListItem Text="Banana" Value="3" />
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
<!-- Modal Popup -->
</div>
</form>
</body>
</html>
Code
C#
protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
Label1.Text = ddlFruits.SelectedItem.Text;
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "new bootstrap.Modal(document.getElementById('MyPopup')).show();", true);
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = ddlFruits.SelectedItem.Text;
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "new bootstrap.Modal(document.getElementById('MyPopup')).show();", true);
}
VB.NET
Protected Sub OnSelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
Label1.Text = ddlFruits.SelectedItem.Text
ClientScript.RegisterStartupScript(Me.[GetType](), "Popup", "new bootstrap.Modal(document.getElementById('MyPopup')).show();", True)
End Sub
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
Label1.Text = ddlFruits.SelectedItem.Text
ClientScript.RegisterStartupScript(Me.[GetType](), "Popup", "new bootstrap.Modal(document.getElementById('MyPopup')).show();", True)
End Sub
Screenshot
