prompt.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <!doctype html>
  2. <html>
  3. <!--
  4. Copyright 2010 The Closure Library Authors. All Rights Reserved.
  5. Use of this source code is governed by the Apache License, Version 2.0.
  6. See the COPYING file for details.
  7. -->
  8. <head>
  9. <title>goog.ui.Prompt</title>
  10. <script src="../base.js"></script>
  11. <script>
  12. goog.require('goog.ui.Prompt');
  13. </script>
  14. <link rel="stylesheet" href="css/demo.css">
  15. <style>
  16. .modal-dialog-bg {
  17. position: absolute;
  18. top: 0px;
  19. left: 0px;
  20. background-color: #FFF;
  21. }
  22. .modal-dialog {
  23. position: absolute;
  24. top: 0px;
  25. left: 0px;
  26. width: 300px;
  27. background-color: #AAF;
  28. border: 2px solid #99c0ff;
  29. }
  30. .modal-dialog-title {
  31. position:relative;
  32. background: #C3D9FF;
  33. padding: 4px;
  34. font: bold 11px verdana;
  35. cursor: default;
  36. }
  37. .modal-dialog-content {
  38. background: #E8EEF7;
  39. padding: 12px 18px 12px 18px; font: normal 12px verdana;
  40. font: normal 12px verdana;
  41. }
  42. .modal-dialog-userInput {
  43. font: normal 12px verdana;
  44. width: 90%;
  45. }
  46. .modal-dialog-buttons {
  47. background: #E8EEF7;
  48. padding: 4px;
  49. font: normal 12px verdana;
  50. text-align: right;
  51. }
  52. .modal-dialog-buttons button {
  53. margin: 5px;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <h1>goog.ui.Prompt</h1>
  59. <p>The default text is selected when the prompt displays</p>
  60. <p>You can use 'Enter' or 'Esc' to click 'Ok' or 'Cancel' respectively</p>
  61. <p>
  62. <a href="#" onclick="prompt.setDefaultValue('Pink');prompt.setVisible(true);">
  63. Prompt
  64. </a>
  65. </p>
  66. <script>
  67. var promptHandler = function(response) {
  68. if (response == null) {
  69. alert('Afraid to answer?');
  70. } else {
  71. alert('I like ' + response + ' too!');
  72. }
  73. }
  74. var prompt = new goog.ui.Prompt(
  75. 'Information Required',
  76. 'What is your favorite color?',
  77. promptHandler);
  78. </script>
  79. </body>
  80. </html>