Twitter Bootstrap Modal Popup Dialog

This article explains how to create a Twitter Bootstrap Modal Popup Dialog and Play a YouTube Video using a HTML5 iframe.

Create a new project using "File" -> "New" -> "Project..." then select web "ASP.NET Web Forms Application". Name it "ModalPopup" as shown in the following figure:

Create a new project

Now, use the following procedure.

Package manager

Now type:

PM -> Install-Package bootstrap -Version 2.3.2

If installed successfully then it will look like this:

Install successfully

Now, in the code behind file index.html use the following code.


<!DOCTYPE html>

<html xmlns="">


    <title>Twitter Bootstrap Creating Modals</title>

    <link href="Content/bootstrap.css" rel="stylesheet" />

    <script src="Scripts/jquery-1.9.1.js"></script>

    <script src="Scripts/bootstrap.js"></script>

    <script src="Scripts/modal.js"></script>



    <div class="well">

        <div class="container">

            <p class="text-info">

                Twitter Bootstrap Modal Popup Dialog</p>

            <div id="pop" class="modal hide fade in" style="display: none;">

                <div class="modal-header">

                    <a class="close" data-dismiss="modal">×</a><br />

                    <p class="text-success">

                        C# Corner Annual Conference 2014 Official Trailer</p>


                <div class="modal-body">


                        <iframe width="100%" height="315" src=""

                            frameborder="0" allowfullscreen></iframe>



                <div class="modal-footer">

                    <a href="#" class="btn btn-small" data-dismiss="modal">Close</a>




                <a data-toggle="modal" href="#pop" class="btn btn-primary btn-small">Official Trailer</a></p>





Now run the page, it will look like the following. Click the Official Trailer button.

run the page

Now, show in the Twitter Bootstrap Modal Popup Dialog and Play a YouTube Video.
Twitter Bootstrap Modal Popup Dialog

I hope this article is useful. If you have any other questions then please provide your comments below.