Click here to Skip to main content
15,891,938 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,

I have a problem to open jquery popup in codebehind using asp.net.

This is my code:

ASP.NET
<div id="popupSharev" class="popup_block2">
              <div id="Div2" class="active">
            <div id="share-link1" class="share-link">
            
            <p>
            <a id="hide" href="#" title="Close" class="c-link"></a>
            <h3>Hi this is popup window</h3>
            <asp:Button runat="server" ID="btnUpdate" />
            </p>
            </div>
            </div>
            </div>


this is anchor tag to open to popup
HTML
<a id="imgshare" href="#?w=500" class="poplight1" rel="popupSharev">
                                           <span><b>1.3K</b> SHARES</span>
                                       </a>


This is my script:

HTML
<script type="text/javascript">


         //When you click on a link with class of poplight and the href starts with a #
         $('a.poplight1[href^=#]').click(function () {
             var popID = $(this).attr('rel'); //Get Popup Name
             var popURL = $(this).attr('href'); //Get Popup href to define size

             //                url.src = "ShareMail.aspx";
             //Pull Query & Variables from href URL
             var query = popURL.split('?');
             var dim = query[1].split('&');
             var popWidth = dim[0].split('=')[1]; //Gets the first query string value

             //Fade in the Popup and add close button
             $('#' + popID).fadeIn().css({ 'width': Number(popWidth) }).prepend('<a href="#" class="close btn_close1 c-link2"></a>');

             //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
             var popMargTop = ($('#' + popID).height() + 80) / 2;
             var popMargLeft = ($('#' + popID).width() + 80) / 2;

             //Apply Margin to Popup
             $('#' + popID).css({
                 'margin-top': -popMargTop,
                 'margin-left': -popMargLeft
             });

             //Fade in Background
             $('body').append('<div id="fade2" style="z-index:10"></div>'); //Add the fade layer to bottom of the body tag.
             $('#fade2').css({ 'filter': 'alpha(opacity=80)' }).fadeIn(); //Fade in the fade layer

             return false;
         });


              //When you click on a link with class of poplight and the href starts with a #
              $('a.poplight1[href^=#]').click(function () {
                  var popID = $(this).attr('rel'); //Get Popup Name
                  var popURL = $(this).attr('href'); //Get Popup href to define size

                  //                url.src = "ShareMail.aspx";
                  //Pull Query & Variables from href URL
                  var query = popURL.split('?');
                  var dim = query[1].split('&');
                  var popWidth = dim[0].split('=')[1]; //Gets the first query string value

                  //Fade in the Popup and add close button
                  $('#' + popID).fadeIn().css({ 'width': Number(popWidth) }).prepend('<a href="#" class="close btn_close1 c-link2"></a>');

                  //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
                  var popMargTop = ($('#' + popID).height() + 80) / 2;
                  var popMargLeft = ($('#' + popID).width() + 80) / 2;

                  //Apply Margin to Popup
                  $('#' + popID).css({
                      'margin-top': -popMargTop,
                      'margin-left': -popMargLeft
                  });

                  //Fade in Background
                  $('body').append('<div id="fade2" style="z-index:10"></div>'); //Add the fade layer to bottom of the body tag.
                  $('#fade2').css({ 'filter': 'alpha(opacity=80)' }).fadeIn(); //Fade in the fade layer

                  return false;
              });


              //Close Popups and Fade Layer
              $('a.close, #fade2').live('click', function () { //When clicking on the close or fade layer...
                  $('#fade2 , .popup_block2').fadeOut(function () {
                      $('#fade2, a.close').remove();
                  }); //fade them both out

                  return false;
              });
              function fdout() {
                  $('#fade2 , .popup_block2').fadeOut(function () {
                      $('#fade2, a.close').remove();
                  }); //fade them both out

                  return false;

              }



              function fdout() {
                  $('#fade2').remove();

              }

              function HideCtrl(ctrl, timer) {
                  var ctryArray = ctrl.split(",");
                  var num = 0, arrLength = ctryArray.length;
                  while (num < arrLength) {
                      if (document.getElementById(ctryArray[num])) {
                          setTimeout('document.getElementById("' + ctryArray[num] + '").style.display = "none";', timer);
                      }
                      num += 1;
                  }
                  return false;
              }
           </script>

If I will take linkbutton and with in onclick event I want to open popup.

Please Help me......
Thank you.
Posted
Updated 16-May-14 2:21am
v3
Comments
Keith Barrow 16-May-14 8:14am    
Hi I have added formatting tags to your question. This makes reading your question easier, especially the code. This will make it more likely someone will responds as people tend not to read a question that is difficult to read (or too long for that matter), it is in your own interests for you to do this next time.
NagaRaju Pesarlanka 16-May-14 8:18am    
ok thanks. but I past the code blog not copied correctly. Anyway thanks...

1 solution

You won't want to do it from codebehind because that means your page is going to postback. Just add onclick="popup();" to whichever control you want.
 
Share this answer
 
Comments
NagaRaju Pesarlanka 16-May-14 8:23am    
sorry I changed the script, I delete popup() function. this is exact code...
NagaRaju Pesarlanka 16-May-14 8:26am    
<asp:LinkButton ID="linkShare" runat="server" OnClick="AdminEdit_OnClick">Share
protected void AdminEdit_OnClick(object sender, EventArgs e)
{
In this blog I want to open my popup
}
ZurdoDev 16-May-14 8:29am    
Ya, Microsoft confused things. On an ASP control OnClick is the C# event. You want to do OnClientClick="popup();return false;" and run your javascript. The return false will actually keep it from posting back.

If for some reason you have to do it in C#, which I strongly suggest you do not, you use Page.ClientScript.RegisterStartupScript(......)
NagaRaju Pesarlanka 16-May-14 8:31am    
In this I want soluation......
ZurdoDev 16-May-14 8:39am    
I gave you solution. I'm confused.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900