The html page is not open in colorbox jquery plugin when linkbutton is clicked firsttime
<p>I have downloaded colorbox jquery plugin from <a href="http://www.jacklmoore.com/colorbox" rel="nofollow">here</a></p>

<p>I want  the same thing as in example <a href="http://www.jacklmoore.com/colorbox/example1/" rel="nofollow">here</a></p>

<p>Now in my scenerio when I click on Linkbutton the html page is not loaded firsttime.
Its loaded when i click the linkbutton secondtime... There is also not any error.
But why this happens, i am not able to get.</p>

<p>I am providing my code so that it will give a better idea</p>

<p><strong>.aspx</strong></p>

<pre><code> &lt;style &gt;
        body
        {
            font: 12px/1.2 Verdana, sans-serif;
            padding: 0 10px;
        }
        a:link, a:visited
        {
            text-decoration: none;
            color: #416CE5;
            border-bottom: 1px solid #416CE5;
        }
        h2
        {
            font-size: 13px;
            margin: 15px 0 0 0;
        }
    &lt;/style&gt;
    &lt;link rel="stylesheet" href="example1/colorbox.css" type="text/css" /&gt;

    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;

    &lt;script src="jquery.colorbox.js" type="text/javascript"&gt;&lt;/script&gt;

    &lt;script type="text/javascript"&gt;
            $(document).ready(function(){

                //Examples of how to assign the ColorBox event to elements
                $(".group1").colorbox({rel:'group1'});
                $(".group2").colorbox({rel:'group2', transition:"fade"});
                $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
                $(".group4").colorbox({rel:'group4', slideshow:true});
                $(".ajax").colorbox();
                $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
                $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
                $(".iframe").colorbox({iframe:true, width:"60%", height:"80%"});
                $(".inline").colorbox({inline:true, width:"50%"});
                $(".callbacks").colorbox({
                    onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                    onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                    onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                    onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                    onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
                });

                $('.non-retina').colorbox({rel:'group5', transition:'none'})
                $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});

                //Example of preserving a JavaScript event for inline calls.
                $("#click").click(function(){ 
                    $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                    return false;
                });

             $("#Result").click(function() {
                $.ajax({
                  type: "POST",
                  url: "Default2.aspx/GetDate",
                  data: "{}",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function(msg) {
                    // Replace the div's content with the page method's return.
                    $("#Result").text(msg.d);

                  }
                });
              });

               $("#LinkButton1").click(function() {
                $.ajax({
                  type: "POST",
                  url: "Default2.aspx/lstbtn",
                  data: "{}",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function(msg) {
                    //alert(msg.d);
                    // Replace the div's content with the page method's return.
                    $("#LinkButton1").attr('href',msg.d);
                   return true;
                  }
                });
              });
            });
        &lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
    &lt;div id="Result"&gt;
        Click here for the time.&lt;/div&gt;
    &lt;h1&gt;
        ColorBox Demonstration&lt;/h1&gt;
    &lt;h2&gt;
        Elastic Transition&lt;/h2&gt;
    &lt;p&gt;
        &lt;a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee."&gt;
            Grouped Photo 1&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child"&gt;Grouped
            Photo 2&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult"&gt;
            Grouped Photo 3&lt;/a&gt;&lt;/p&gt;
    &lt;h2&gt;
        Fade Transition&lt;/h2&gt;
    &lt;p&gt;
        &lt;a class="group2" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee"&gt;
            Grouped Photo 1&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a class="group2" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child"&gt;Grouped
            Photo 2&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a class="group2" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult"&gt;
            Grouped Photo 3&lt;/a&gt;&lt;/p&gt;
    &lt;h2&gt;
        No Transition + fixed width and height (75% of screen size)&lt;/h2&gt;
    &lt;p&gt;
        &lt;a class="group3" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee."&gt;
            Grouped Photo 1&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a class="group3" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child"&gt;Grouped
            Photo 2&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a class="group3" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult"&gt;
            Grouped Photo 3&lt;/a&gt;&lt;/p&gt;
    &lt;h2&gt;
        Slideshow&lt;/h2&gt;
    &lt;p&gt;
        &lt;a class="group4" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee."&gt;
            Grouped Photo 1&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a class="group4" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child"&gt;Grouped
            Photo 2&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a class="group4" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult"&gt;
            Grouped Photo 3&lt;/a&gt;&lt;/p&gt;
    &lt;h2&gt;
        Other Content Types&lt;/h2&gt;
    &lt;p&gt;
        &lt;a class='ajax' href="WordToHtml/Notes.htm" title="Homer Defined"&gt;Outside HTML (Ajax)&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a class='youtube' href="Uploadedfiles/Wildlife.wmv" title="The Knife: We Share Our Mother's Health"&gt;
            Flash / Video (Iframe/Direct Link To YouTube)&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a class='vimeo' href="Uploadedfiles/Wildlife.wmv" title="R&amp;ouml;yksopp: Remind Me"&gt;
            Flash / Video (Iframe/Direct Link To Vimeo)&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a runat="server" id="a" class='iframe' href="Uploadedfiles/Education Portal.xlsx.1.html"&gt;
            Outside Webpage (Iframe)&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a runat="server" id="a1" class='iframe' href="~/Images/Desert.jpg"&gt;Image
            (Iframe)&lt;/a&gt;&lt;/p&gt;

    &lt;p runat="server"&gt;
        &lt;asp:LinkButton ID="LinkButton1" runat="server" CssClass="iframe"&gt;LinkButton&lt;/asp:LinkButton&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a class='inline' href="#inline_content"&gt;Inline HTML&lt;/a&gt;&lt;/p&gt;
    &lt;h2&gt;
        Demonstration of using callbacks&lt;/h2&gt;
    &lt;p&gt;
        &lt;a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island"&gt;
            Example with alerts&lt;/a&gt;. Callbacks and event-hooks allow users to extend functionality
        without having to rewrite parts of the plugin.&lt;/p&gt;
    &lt;h2&gt;
        Retina Images&lt;/h2&gt;
    &lt;p&gt;
        &lt;a class="retina" href="../content/daisy.jpg" title="Retina"&gt;Retina&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;
        &lt;a class="non-retina" href="../content/daisy.jpg" title="Non-Retina"&gt;Non-Retina&lt;/a&gt;&lt;/p&gt;
    &lt;!-- This contains the hidden content for inline calls --&gt;
    &lt;div style='display: none'&gt;
        &lt;div id='inline_content' style='padding: 10px; background: #fff;'&gt;
            &lt;p&gt;
                &lt;strong&gt;This content comes from a hidden element on this page.&lt;/strong&gt;&lt;/p&gt;
            &lt;p&gt;
                The inline option preserves bound JavaScript events and changes, and it puts the
                content back where it came from when it is closed.&lt;/p&gt;
            &lt;p&gt;
                &lt;a id="click" href="#" style='padding: 5px; background: #ccc;'&gt;Click me, it will be
                    preserved!&lt;/a&gt;&lt;/p&gt;
            &lt;p&gt;
                &lt;strong&gt;If you try to open a new ColorBox while it is already open, it will update itself
                    with the new content.&lt;/strong&gt;&lt;/p&gt;
            &lt;p&gt;
                Updating Content Example:&lt;br /&gt;
                &lt;a class="ajax" href="../content/ajax.html"&gt;Click here to load new content&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/form&gt;
</code></pre>

<p><strong>.cs</strong></p>

<pre><code>[WebMethod] 
public static string GetDate()
{
    return DateTime.Now.ToString();
}
 [WebMethod]
public static string lstbtn()
{
    return "WordToHtml/Notes.htm";
}**
</code></pre>
