In this article I will explain with an example, how to open (show) Bootstrap 4 Modal Popup Window from Server Side (Code Behind) in ASP.Net using C# and VB.Net.
This article makes use of Bootstrap version 4.
 
 
HTML Markup
The following HTML Markup consists of an ASP.Net Button.
The Button has been assigned with OnClick event handler.
<asp:Button ID="btnShowPopup" runat="server" Text="Show Popup" OnClick="ShowPopup"
    CssClass="btn btn-info btn-lg" />
 
 
Applying Bootstrap Modal Popup Plugin
Inside the HTML Markup, the following Bootstrap 4 CSS file is inherited.
1. bootstrap.min.css
 
And then, the following Bootstrap 4 and jQuery JS files are inherited.
1. jquery.min.js
2. bootstrap.bundle.min.js
The HTML Markup also consists of an HTML DIV. The HTML DIV has been applied with Bootstrap 4 Modal Popup plugin.
<!-- Bootstrap -->
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css' />
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.bundle.min.js'></script>
<!-- Bootstrap -->       
<!-- Modal Popup -->
<div id="MyPopup" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"></h4>
                <button type="button" class="close" data-dismiss="modal">
                    &times;</button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">
                    Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal Popup -->
 
 
JavaScript function for opening (showing) Bootstrap Modal Popup
The following JavaScript function will be called, when the Button is clicked.
Inside the JavaScript function, first the title and body values are set in their respective HTML DIVs and the Bootstrap Modal Popup Window will be opened (shown) using show function.
<script type="text/javascript">
    function ShowPopup(title, body) {
        $("#MyPopup .modal-title").html(title);
        $("#MyPopup .modal-body").html(body);
        $("#MyPopup").modal("show");
    }
</script>
 
 
Calling the JavaScript function from Server Side (Code Behind) on Button Click
When the Button is clicked, the following event handler is called.
Inside this event handler, the ShowPopup JavaScript function is called using RegisterStartupScript method of ClientScript class.
C#
protected void ShowPopup(object sender, EventArgs e)
{
    string title = "Greetings";
    string body = "Welcome to ASPSnippets.com";
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + title + "', '" + body + "');", true);
}
 
VB.Net
Protected Sub ShowPopup(ByVal sender As Object, ByVal e As EventArgs)
    Dim title As String = "Greetings"
    Dim body As String = "Welcome to ASPSnippets.com"
    ClientScript.RegisterStartupScript(Me.GetType(), "Popup", "ShowPopup('" & title & "', '" & body & "');", True)
End Sub
 
 
Screenshot
Bootstrap 4: Open Modal Popup from Server Side in ASP.Net
 
 
Browser Compatibility

The above code has been tested in the following browsers.
Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code


Other available versions