title: How to load HTML Elements after JavaScript Function?
body: <p>I started learning JavaScript recently, and was practicing with prompt boxes, and found <a href="http://t4t5.github.io/sweetalert/" rel="nofollow">SweetAlert</a>. Used it to display a small dialog box with a placeholder in it. It turned out well. </p>
  
  <p>But, the HTML Elements I want to load, loads before the dialog box appear. I mean, those elements are visible in the background. I want them to load only after the Dialog Box event is over. Here's my <strong><a href="http://jsfiddle.net/anirudhkarthik/jSQrj/158/" rel="nofollow">Code at JSFiddle</a></strong></p>
  
  <pre><code>window.onload = function() {
  
    swal({
      title: "An input!",
      text: "Write something interesting:",
      type: "input",
      showCancelButton: true,
      closeOnConfirm: false,
      animation: "slide-from-top",
      inputPlaceholder: "Write something"
    }, function(inputValue) {
      if (inputValue === false) return false;
      if (inputValue === "") {
        swal.showInputError("You need to write something!");
        return false
      }
      swal.close();
      document.getElementById("demo").innerHTML = inputValue;
    });
  
  }
  </code></pre>
  
  <p>I want the HTML text to be loaded after the dialog box event is done. Hope you get it. 
  I've just started to learn, so a noob-friendly answer would be appreciated. Thanks :)</p>