title: How to include HTML in a js file?
body: <p>I created a useful generic message box using javascript and bootstrap modal dialog. I (and potentially others) can use it anywhere. I would like to extract it into a js file, so that I can just refer to this js file in other projects. But I don't know how to include the HTML code block of the bootstrap modal dialog.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;A useful generic message box&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="~/Content/bootstrap.min.css" media="screen" /&gt;
      &lt;script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/bootstrap.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
      &lt;script type="text/javascript"&gt;
          function testAlert() {
              messageBox('Something went wrong!', 'error', null, function () {
                  alert('Message dialog closed.');
              });
          }
  
          function testConfirm() {
              messageBox('Do you want to proceed?', 'warning', { okButtonName: 'Yes', cancelButtonName: 'No' }, function () {
                  alert('"Yes" was selected.');
              });
          }
  
      function testPrompt() {
          messageBox('How do you feel now?', 'normal', { showTextBox: true }, function (event) {
              alert('User entered "' + event.data.getUserInput() + '".');
          });
      }
  
          function messageBox(msg, significance, options, actionConfirmedCallback) {
              var okButtonName, cancelButtonName, showTextBox;
  
              if (options == null) {
                  okButtonName = 'OK';
                  cancelButtonName = null;
                  showTextBox = null;
              } else {
                  okButtonName = options.okButtonName;
                  cancelButtonName = options.cancelButtonName;
                  showTextBox = options.showTextBox;
              }
                  
  
              if (showTextBox == true)
                  $('#MessageDialogTextArea').show();
              else
                  $('#MessageDialogTextArea').hide();
  
              //if (typeof (okButtonName) != 'undefined')
              if (okButtonName != null)
                  $('#messageDialogOkButton').html(okButtonName);
              else
                  $('#messageDialogOkButton').html('OK');
  
              //if (typeof (cancelButtonName) == 'undefined')
              if (cancelButtonName == null)
                  $('#messageDialogCancelButton').hide();
              else {
                  $('#messageDialogCancelButton').show();
                  $('#messageDialogCancelButton').html(cancelButtonName);
              }
  
              $('#messageDialogOkButton').unbind('click');
  
              if (typeof (actionConfirmedCallback) != 'undefined')
                  $('#messageDialogOkButton').on('click', { getUserInput: getUserInput }, actionConfirmedCallback);
              else
                  $('#messageDialogOkButton').removeAttr('onclick');
  
              var content = $("#MessageDialogContent");
  
              if (significance == 'error')
                  content.attr('class', 'text-danger');
              else if (significance == 'warning')
                  content.attr('class', 'text-warning');
              else
                  content.attr('class', 'text-success');
  
              content.html(msg);
              $("#MessageDialog").modal();
          }
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
      &lt;a href="#" onclick="testAlert();"&gt;Test alert&lt;/a&gt; &lt;br/&gt;
      &lt;a href="#" onclick="testConfirm();"&gt;Test confirm&lt;/a&gt; &lt;br/&gt;
      &lt;a href="#" onclick="testPrompt();"&gt;Test prompt&lt;/a&gt;
  
      &lt;div class="modal fade" id="MessageDialog" role="dialog"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;p class="text-success" id="MessageDialogContent"&gt;Some text in the modal.&lt;/p&gt;
                      &lt;p&gt;&lt;textarea id="MessageDialogTextArea" cols="70" rows="5"&gt;&lt;/textarea&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-primary" data-dismiss="modal" id="messageDialogOkButton"&gt;OK&lt;/button&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal" id="messageDialogCancelButton"&gt;Cancel&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>