only-one-dialog.html 1.9 KB

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