Post
Ask Question

Twitter Bootstrap Modal Popup Dialog

Introduction

 
This article explains how to create a Twitter Bootstrap Modal Popup Dialog and Play a YouTube Video using an 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
  1. <!DOCTYPE html>  
  2. <html xmlns="https://www.w3.org/1999/xhtml">  
  3.   
  4.      <head>  
  5.           <title>Twitter Bootstrap Creating Modals</title>  
  6.           <link href="Content/bootstrap.css" rel="stylesheet" />  
  7.           <script src="Scripts/jquery-1.9.1.js"></script>  
  8.           <script src="Scripts/bootstrap.js"></script>  
  9.           <script src="Scripts/modal.js"></script>  
  10.      </head>  
  11.   
  12.      <body>  
  13.           <div class="well">  
  14.                <div class="container">  
  15.                     <p class="text-info">  
  16.                          Twitter Bootstrap Modal Popup Dialog</p>  
  17.                     <div id="pop" class="modal hide fade in" style="display: none;">  
  18.                          <div class="modal-header">  
  19.                               <a class="close" data-dismiss="modal">×</a><br />  
  20.                               <p class="text-success">  
  21.                                    C# Corner Annual Conference 2014 Official Trailer</p>  
  22.                          </div>  
  23.                          <div class="modal-body">  
  24.                               <p>  
  25.                                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/KZ8q2jtrbcw" frameborder="0" allowfullscreen></iframe>  
  26.                               </p>  
  27.                          </div>  
  28.                          <div class="modal-footer">  
  29.                               <a href="#" class="btn btn-small" data-dismiss="modal">Close</a>  
  30.                          </div>  
  31.                     </div>  
  32.                     <p>  
  33.                          <a data-toggle="modal" href="#pop" class="btn btn-primary btn-small">Official Trailer</a></p>  
  34.                </div>  
  35.           </div>  
  36.      </body>  
  37.   
  38. </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.


Similar Articles