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.

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.

index.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <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>

</head>

<body>

    <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>

                <div class="modal-body">

                    <p>

                        <iframe width="100%" height="315" src="http://www.youtube.com/embed/KZ8q2jtrbcw"

                            frameborder="0" allowfullscreen></iframe>

                    </p>

                </div>

                <div class="modal-footer">

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

                </div>

            </div>

            <p>

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

        </div>

    </div>

</body>

</html>

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.