Salve a tutti amici, ho una pagina aspx che è così composta:

Head:
codice HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'/>
  <meta charset="utf-8"/>

   <style>
  
html, body{
  height: 100%;
  margin: 0;
  paddin: 0;
}
 
body{
  background: white;
}

.main-container{
  height:100%;
  position: relative;
  background-color: #231e1f;
}

.loader-container{
  width: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -120px;
  font-family: Georgia, Times, 'Times New Roman', serif;
}

.progress-bar{
  border: none;
  width: 200px;
  height: 1px;
  background-color:#a8a8a8;
}

.progress-bar[value]::-webkit-progress-bar {
  background-color:#a8a8a8;
}

.progress-bar[value]::-webkit-progress-value {
  background-color:#231E1F;
}

.progress-bar[value]::-moz-progress-bar { 
  background-color:#231E1F;
}

.progress-bar[aria-valuenow]:before  {
    background: #231E1F;
}

.loader-spark{
  width: 15px;
  height: 15px;
  background: url('http://78.47.222.66/snippets/progress-bar/img/spark.png') no-repeat left top;
  position: absolute;
  top: 10px;
  left: -10px;
}

.loading-title{
  font-size: 1em;
  font-style: italic;
  color: #e9d9c6;
  text-align: center;
  font-weight: normal;
  margin: 30px 0 0 0;
}

.loading-title .loading-title-val{
  display: block;
  color: #ffae05;
  margin-bottom: 10px;
}

.firework{
  width: 40px;
  height: 105px;
  background: url('http://78.47.222.66/snippets/progress-bar/img/firework.png') no-repeat 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: 70px;
  margin-top: -51px;
}

    </style>


    <style>
  
* {
  font-family: 'Roboto', sans-serif;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -65px;
  margin-top: -20px;
  width: 130px;
  height: 40px;
  text-align: center;
}

input {
  outline: none;
  height: 40px;
  text-align: center;
  width: 130px;
  border-radius: 40px;
  background: #fff;
  border: 2px solid #1ECD97;
  color: #1ECD97;
  letter-spacing: 1px;
  text-shadow: 0;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
input:hover {
  color: white;
  background: #1ECD97;
}
input:active {
  letter-spacing: 2px;
}
input:after {
  content: "SUBMIT";
}

.onclic {
  width: 40px;
  border-color: #bbbbbb;
  border-width: 3px;
  font-size: 0;
  border-left-color: #1ECD97;
  -webkit-animation: rotating 2s 0.25s linear infinite;
          animation: rotating 2s 0.25s linear infinite;
}
.onclic:after {
  content: "";
}
.onclic:hover {
  color: #1ECD97;
  background: white;
}

.validate {
  font-size: 13px;
  color: white;
  background: #1ECD97;
}
.validate:after {
  font-family: 'FontAwesome';
  content: "\f00c";
}

@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

    </style>


           <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <title>Loader</title>
        <meta name="description" content=""/>
        <meta name="viewport" content="width=device-width"/>
        <link rel="stylesheet" href="css/normalize.min.css"/>
        <link rel="stylesheet" href="css/main.css"/>
    <script src="jquery.min.js"></script>

        <script type="text/javascript">

            function closeWindow() {
                setTimeout(function() {
                    window.close();
                }, 10000);

            }
      
         </script>



  <script type="text/javascript">


         $(document).ready(function () {
             $("#btnStartChat").click(function () {

             var pBar = $('.progress-bar');
             var spark = $('.loader-spark');
             var firework = $('.firework');
             var lTitleVal = $('.loading-title-val');
             var lTitleWait = $('.loading-title-wait');
             var mainContainer = $('.main-container')
             var loadMax = pBar.attr('max');
             var loadValue = pBar.val();
             var sparStartPos = spark.position().left;
             var pBarWidth = $('.progress-bar').width();
             var pBarStep = pBarWidth / loadMax;

             // A function to update the progress bar and spark values
             // retruns 'loaded' when it's done
             var loadingUpdate = function (val) {

                 addValue = pBar.val(val);
                 spark.css('left', (sparStartPos + val * pBarStep) + 'px');
                 lTitleVal.text(val + '%');

                 if (val == loadMax) {
                     spark.hide();
                     lTitleWait.text('Connessione effettuata!');
                     launchIt();
                     closeWindow()
                     return 'loaded';
                 } else {
                     return 'loading';
                 }

             }
           

             // An action to take after it's loaded
             var launchIt = function () {
                 spriteAnimation(firework, 40, 30, 0, 9, false, function () {
                     spriteAnimation(firework, 40, 30, 9, 18, true, false);
                     firework.delay(300).animate({ top: "-200px" }, 1000, function () {
                         mainContainer.fadeTo(100, 0.4).fadeTo(100, 0.9).fadeTo(100, 0.4).fadeTo(100, 0.9).fadeOut(300);
                     });
                 });

             }


             // Function for the sprite animation
             var spriteAnimation = function (el,
                                              spriteWidth,
                                              spriteAnimFrame,
                                              frameStart,
                                              frameCount,
                                              loop,
                                              fallback) {

                 var frame = frameStart;

                 var animateSprite = function () {

                     frame++;

                     $(el).css('background-position', '-' + (frame * spriteWidth) + 'px 0');

                     if (frame < frameCount) {
                         setTimeout(function () {
                             animateSprite();
                         }, spriteAnimFrame);
                     } else {
                         if (loop) {
                             frame = frameStart;
                             animateSprite();
                         } else {
                             if (fallback) {
                                 try {
                                     fallback();
                                 }
                                 catch (err) {

                                 }
                             }
                         }
                     }

                 }

                 animateSprite();

             }

             // simuating loading in order to show how it works, since we have actually
             // nothing to load currently

             var simulateLoading = function () {

                 var timeInterval = (1000 / loadMax) * 5;

                 var loading = function () {
                     loadValue += 1;

                     if (loadingUpdate(loadValue) == 'loaded') {
                         clearInterval(animateProgress);
                     }
                 };

                 var animateProgress = setInterval(function () {
                     loading();
                 }, timeInterval);

             }
            
             spriteAnimation(spark, 15, 30, 0, 10, true, false);

             simulateLoading();

         });
         });
         </script>

     <script type="text/javascript">


         $(function () {
             $("#btnStartChat").click(function () {
                 $("#btnStartChat").addClass("onclic", 250, validate);
             });

             function validate() {
                 setTimeout(function () {
                     $("#btnStartChat").removeClass("onclic");
                     $("#btnStartChat").addClass("validate", 450, callback);
                 }, 2250);
             }
             function callback() {
                 setTimeout(function () {
                     $("#btnStartChat").removeClass("validate");
                 }, 1250);
             }
         });
         </script>

Ora se nel body inserisco questo codice tutto funziona:

codice HTML:
  <div class="main-container">
        <div class="firework"></div>
        
        <div class="loader-container">
          
          <div class="loader-spark"></div>
          
          <progress value="0" max="100" class="progress-bar"></progress>
          
          <h2 class="loading-title">
            <span class="loading-title-val">
              0%
            </span>
            <span class="loading-title-wait">Clicca per entrare....</span>
          </h2>
          
        </div>
        
      </div>


    <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
    <div class="container">
<input id="btnStartChat" value="Start Chat"/></div>
Se invece creo un overlay sul body creando gli stessi elementi in questa maniera, al click del button non succede nulla:

codice HTML:
  <script type="text/javascript">

         $(function () {

             var docHeight = $(document).height();

             $("body").append("<div id='overlay'>" + "<div class='main-container'>" + "<div class='firework'>" + "</div>" + " <div class='loader-container'>" + "<div class='loader-spark'>" + "</div>" + "<progress value='0' max='100' class='progress-bar'>" + "</progress>" + "<h2 class='loading-title'>" + "<span class='loading-title-val'>" + '0%' + "</span>" + "<span class='loading-title-wait'>" + 'Clicca per entrare....' + "</span>" + " </h2>" + "</div>" + "</div>" + "<div class='container'>" + "<input id='btnStartChat' value='Start Chat'/>" + "</div>" + "</div>");
             $("#overlay")
                .height(docHeight)
                .css({
                    'opacity': 0.4,
                    'position': 'absolute',
                    'top': 0,
                    'left': 0,
                    'background-color': 'black',
                    'width': '100%',
                    'z-index': 5000
                });

         });
             </script>
Dove sbaglio? Potete aiutarmi?
Grazie un saluto.