index.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Bulma Modal demo (inline)</title>
  7. <link href="bulma.min.css" rel="stylesheet"/>
  8. <script src="modaldemo3.js"></script>
  9. </head>
  10. <body>
  11. <div class="hero">
  12. <div class="hero-body">
  13. <h2 class="title is-4">TBulmaModal demo</h2>
  14. <p class="">This is simple demo where a <em>TBulmaModal</em> class is used to show a modal dialog.
  15. The modal HTML is present in HTML page iself, and the property <em>ElementID</em> refers to it.</p>
  16. </div>
  17. </div>
  18. <hr class="my-4">
  19. <div id="modals-parent">
  20. <div id="mdlDialog" class="modal" tabindex="-1">
  21. <div class="modal-background"></div>
  22. <div class="modal-card">
  23. <div class="modal-card-head">
  24. <p class="modal-card-title">Bulma modal demo</p>
  25. <button type="button" class="delete" aria-label="Close"></button>
  26. </div>
  27. <div class="modal-card-body">
  28. <h5 class="title is-5">Hello, World!</h5>
  29. <p>Brought to you inline by <em>TBulmaModal</em>...</p>
  30. </div>
  31. <div class="modal-card-foot">
  32. <button type="button" class="button" id="btnClose">Close</button>
  33. <button type="button" class="button is-success" id="btnSave">Save changes</button>
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. <div class="box py-5">
  39. <div class="is-flex is-justify-content-center">
  40. <button id="btnShowModal" class="button is-primary">Show modal dialog</button>
  41. </div>
  42. </div>
  43. <script>
  44. rtl.showUncaughtExceptions=true;
  45. window.addEventListener("load", rtl.run);
  46. </script>
  47. </body>
  48. </html>