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