title: Jquery to block UI on pop up window
body: <p>I have create an application in which I want to block UI on loading. On clicking the button new pop up window will open and I want to block the pop up window UI on loading. Actually the code I have written will open the window in new pop window and I want to block the UI till the fully page is loaded. I didn't create any JQUERY for the blocking UI on loading.</p>
  
  <pre><code>&lt;asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"&gt;
      &lt;link rel="stylesheet" type="text/css" href="contentslider.css" /&gt;  
      &lt;link rel="stylesheet" type="text/css" href="js/jquery-ui.css" /&gt;  
      &lt;script type="text/javascript"&gt;
          $(function () {
              $("#tabs").tabs();
          });
      &lt;/script&gt;
  &lt;script type="text/javascript" src="js/contentslider.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="js/contentslider1.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="js/contentslider2.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="js/contentslider3.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="js/contentslider4.js"&gt;
  &lt;/script&gt; 
  
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"&gt;
  
      &lt;div id="tabs"&gt;
          &lt;%# Eval("Qsnsubject")%&gt;
          &lt;asp:Repeater ID="TablLinkRepeater" runat="server"&gt;
              &lt;HeaderTemplate&gt;
                  &lt;ul&gt;
              &lt;/HeaderTemplate&gt;
              &lt;ItemTemplate&gt;            
                  &lt;li&gt;&lt;a href="#Tab&lt;%#(((RepeaterItem)Container).ItemIndex).ToString() %&gt;"&gt;&lt;%# Eval("Qsnsubject")%&gt;
                     &lt;/a&gt;&lt;/li&gt;
              &lt;/ItemTemplate&gt;
              &lt;FooterTemplate&gt;
                  &lt;/ul&gt;
              &lt;/FooterTemplate&gt;
          &lt;/asp:Repeater&gt;
  
          &lt;%-- Tabs and Content --%&gt;
          &lt;asp:Repeater ID="TabRepeater" runat="server"&gt;
              &lt;ItemTemplate&gt;
                  &lt;div id="Tab&lt;%#(((RepeaterItem)Container).ItemIndex).ToString() %&gt;"&gt;                    
                   &lt;div id="slider&lt;%#(((RepeaterItem)Container).ItemIndex).ToString() %&gt;" class="sliderwrapper"&gt; 
                      &lt;asp:Repeater ID="ContentRepeater" runat="server"&gt;
                          &lt;ItemTemplate&gt;                        
                              &lt;div class="Content" id="ContentDiv" runat="server"&gt;                                  
                              &lt;div  class="contentdiv"&gt;
                              &lt;asp:PlaceHolder ID="PlPreview" runat="server"&gt;&lt;/asp:PlaceHolder&gt;   
                                  &lt;br&gt;                                             
                                 &lt;input id="r" class="reset" data-info="&lt;%# Eval("ContentIndex") %&gt;" type="button" value="Reset" /&gt;
                                 &lt;input id="m" class="Mark" data-info="&lt;%# Eval("ContentIndex")  %&gt;" type="button" value="Mark as review" /&gt;
                                 &lt;input id="u" class="Unmark" data-info="&lt;%# Eval("ContentIndex")  %&gt;" type="button" value="Unmark as Review"  /&gt;
                              &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/ItemTemplate&gt;
                      &lt;/asp:Repeater&gt;
                   &lt;/div&gt;
                   &lt;div id="paginate-slider&lt;%#(((RepeaterItem)Container).ItemIndex).ToString() %&gt;" class="pagination"&gt; 
                  &lt;/div&gt;
                   &lt;div id="paginate1-slider&lt;%#(((RepeaterItem)Container).ItemIndex).ToString() %&gt;" class="pagination2"&gt;    
  
                            &lt;/div&gt;
  
                  &lt;/div&gt;
  
              &lt;/ItemTemplate&gt;
          &lt;/asp:Repeater&gt;
           &lt;div class="pagination2" style="text-align:right"&gt;
                            &lt;asp:Button ID="btnsubmit" runat="server" Text="Submit" BorderStyle="Inset" 
                                Width= "100px" Height="40px"
                                ToolTip="Click to Submit the Exam" onclick="btnsubmit_Click" /&gt;&lt;/div&gt; 
     &lt;/div&gt;
  
      &lt;div&gt;
  
          &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('#slider0').block({ message: '&lt;h1&gt;WELCOME! Press Next to show questions&lt;/h1&gt;',
              css: { border: '3px solid #a00' }
          });
  
      });   
      $(".pagination").click(function () {
          $('#slider0').unblock();       
      });
      $(".pagination2").click(function () {
          $('#slider0').unblock();
      });
      featuredcontentslider.init({
          id: "slider0",
          contentsource: ["inline", ""],
          toc: "#increment",
          nextprev: ["Previous", "Next"],
          revealtype: "click",
          enablefade: [true, 0.2],
          autorotate: [true, 3000],
          onChange: function (previndex, curindex, contentdivs) {
          }
  
  
      })
  
  &lt;/script&gt;  
  &lt;script type="text/javascript"&gt;
  
      featuredcontentslider1.init({
          id: "slider1",
          contentsource: ["inline", ""],
          toc: "#increment",
          nextprev: ["Previous", "Next"],
          revealtype: "click",
          enablefade: [true, 0.2],
          autorotate: [true, 3000],
          onChange: function (previndex, curindex, contentdivs) {
          }
  
  
      })
  
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
      featuredcontentslider2.init({
          id: "slider2",
          contentsource: ["inline", ""],
          toc: "#increment",
          nextprev: ["Previous", "Next"],
          revealtype: "click",
          enablefade: [true, 0.2],
          autorotate: [true, 3000],
          onChange: function (previndex, curindex, contentdivs) {
          }
  
  
      })
  
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
      featuredcontentslider3.init({
          id: "slider3",
          contentsource: ["inline", ""],
          toc: "#increment",
          nextprev: ["Previous", "Next"],
          revealtype: "click",
          enablefade: [true, 0.2],
          autorotate: [true, 3000],
          onChange: function (previndex, curindex, contentdivs) {
          }
  
  
      })
  
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
      featuredcontentslider4.init({
          id: "slider4",
          contentsource: ["inline", ""],
          toc: "#increment",
          nextprev: ["Previous", "Next"],
          revealtype: "click",
          enablefade: [true, 0.2],
          autorotate: [true, 3000],
          onChange: function (previndex, curindex, contentdivs) {
          }
  
  
      })
  
  &lt;/script&gt; 
  
  &lt;script&gt;
  
      $('input[type=radio]').click(function (e) {
          thisdata = $(this).attr('data-info');
          $("#pno" + thisdata).css("background-color", "Green");
         });
  
      $(".reset").click(function () {
          thisdata = $(this).attr('data-info');
          $('input[data-info=' + thisdata + ']').attr('checked', false);
          $("#pno" + thisdata).css("background-color", "Red");       
      });
      $(".Mark").click(function () {
          thisdata = $(this).attr('data-info');
          if ($('input[data-info=' + thisdata + ']').is(':checked'))
          {
              $("#pno" + thisdata).css("background-color", 'RGB(128,0,128)');
          }
      });
      $(".Unmark").click(function () {
          thisdata = $(this).attr('data-info');
          if ($('input[data-info=' + thisdata + ']').is(':checked')) {
              $("#pno" + thisdata).css("background-color", "Green");
          }
      });
  
  //    $(document).bind("contextmenu", function (e) {
  //        e.preventDefault();
  
  //    });
      $("#ContentPlaceHolder1_btnsubmit").click(function () {
          $.blockUI();
      });
  
      $(window).unload(function () {
          $.cookie("unameName", null);
      });
  
  //    $('input[type=button]').click(function () {
  //        console.log("hgh");
  //        thisdata = $(this).attr('data-info');
  //        $("#pno" + thisdata).css("background-color", "#111");
  //    });
  //    $('.toc').click(function () {           
  //       
  //     $(this).css("background-color", "#008000");
  //     });  
  //         
  
  &lt;/script&gt;
  
  
  &lt;/asp:Content&gt;
  </code></pre>