demos/custom-dialogs/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Custom Dialog</title>
  <script src="../../blockly_compressed.js"></script>
  <script src="../../blocks_compressed.js"></script>
  <script src="../../msg/js/en.js"></script>
  <style>
    body {
      background-color: #fff;
      font-family: sans-serif;
    }
    h1 {
      font-weight: normal;
      font-size: 140%;
    }
  </style>
</head>
<body>
  <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
    <a href="../index.html">Demos</a> &gt; Custom Dialog</h1>

  <p>This is a simple demo of replacing modal browser dialogs with HTML.
     To see how it works, see the source code in
     <a href="custom-dialog.js">custom-dialog.js</a>
  </p>

  <p>Try creating new variables, creating variables with names already in
     use, or deleting multiple blocks on the workspace.
  </p>

  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

  <xml id="toolbox" style="display: none">
    <category name="Inputs" colour="%{BKY_MATH_HUE}">
      <block type="math_number" gap="32">
        <field name="NUM">123</field>
      </block>
      <block type="text"></block>
      <block type="text_prompt_ext">
        <value name="TEXT">
          <shadow type="text">
            <field name="TEXT">abc</field>
          </shadow>
        </value>
      </block>
    </category>
    <sep></sep>
    <category name="Variables" colour="%{BKY_VARIABLES_HUE}" custom="VARIABLE"></category>
    <category name="Functions" colour="%{BKY_PROCEDURES_HUE}" custom="PROCEDURE"></category>
  </xml>

  <script>
    var demoWorkspace = Blockly.inject('blocklyDiv',
        {media: '../../media/',
         toolbox: document.getElementById('toolbox')});
  </script>
  <script src="custom-dialog.js"></script>

</body>
</html>