only-one-dialog.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="../assets/jquery/jquery-1.10.2.min.js"></script>
  5. <link href="../assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  6. <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
  7. <link href="../assets/bootstrap-dialog/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
  8. <script src="../assets/bootstrap-dialog/js/bootstrap-dialog.min.js"></script>
  9. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  10. <title>Only one dialog</title>
  11. <meta charset="utf-8" />
  12. <style type="text/css">
  13. .floating-menu {
  14. background-color: gray;
  15. border: 1px solid blue;
  16. padding: 20px;
  17. position: absolute;
  18. top: 10px;
  19. right: 10px;
  20. z-index: 9999;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="floating-menu">
  26. <button class="btn btn-primary" id="btn-open">Open dialog</button>
  27. </div>
  28. <script type="text/javascript">
  29. /**
  30. * See how to limit only one dialog can be opened at a time.
  31. */
  32. $(function() {
  33. var $btn = $('#btn-open');
  34. $btn.on('click', function(event) {
  35. BootstrapDialog.closeAll();
  36. var dialog = new BootstrapDialog({
  37. message: 'The only one.'
  38. });
  39. dialog.open();
  40. });
  41. });
  42. </script>
  43. </body>
  44. </html>