How to open a modal poppup window in asp.net?

Question

Here is my java script code:

    <script> 
    $('#<%= btnOpen.ClientID %>').click(function (e) { 
    e.preventDefault();
    $('#content').modal({ onOpen: function (dialog) { 
     dialog.overlay.fadeIn('slow', function () { 
      dialog.data.hide();
      dialog.container.fadeIn('slow', function () { 
      dialog.data.slideDown('slow'); 
     }); 
    }); 
   }, 
   onClose: function (dialog) { 
    dialog.data.fadeOut('slow', function () { 
     dialog.container.slideUp('slow', function () { 
      dialog.overlay.fadeOut('slow', function () { 
       $.modal.close(); // must call this! 
       }); 
      }); 
     }); 
    }  
  }); 
 </script> 

And my button

  <td> 
   <asp:Button ID="btnOpen" runat="server" Text="Open" ClientIDMode="Static" /> 
  </td>

at this situation on click of button only page is refresh

Answer 1

Have you try this link : http://www.codeproject.com/Articles/34996/ASP-NET-AJAX-Control-Toolkit-ModalPopupExtender-Co

<asp:scriptmanager id="ScriptManager1" runat="server">
</asp:scriptmanager>

<asp:button id="Button1" runat="server" text="Button" />

<cc1:modalpopupextender id="ModalPopupExtender1" runat="server"


cancelcontrolid="btnCancel" okcontrolid="btnOkay" 
targetcontrolid="Button1" popupcontrolid="Panel1" 
popupdraghandlecontrolid="PopupHeader" drag="true" 
backgroundcssclass="ModalPopupBG">
</cc1:modalpopupextender>

<asp:panel id="Panel1" style="display: none" runat="server">
<div class="HellowWorldPopup">
            <div class="PopupHeader" id="PopupHeader">Header</div>
            <div class="PopupBody">
                <p>This is a simple modal dialog</p>
            </div>
            <div class="Controls">
                <input id="btnOkay" type="button" value="Done" />
                <input id="btnCancel" type="button" value="Cancel" />
    </div>
    </div>

Answer 2

试试这个来限制回发：

<asp:Button ID="btnOpen" runat="server" Text="Open" ClientIDMode="Static" OnClientClick="return false;" />

Answer 3

I would recommend adding in a document ready statement

<script>
$(document).ready(function(e){
    //rest of your script here
});
</script>

Another thing to mention is if you know the specific id of your button just reference it as such

$('#btnOpen').click(function(e){
    e.preventDefault();
    //rest of your script here
});

End result:

<script>
    $(document).ready(function(){
        $('#btnOpen').click(function(e){
            e.preventDefault();

            if(!HttpContext.Current.Session["UserID"]){
                //userID exists show form code
                //rest of original code here
            } else {
                //do something else or nothing
            }
        });
    });
</script>

<asp:Button ID="btnOpen" runat="server" Text="Open" ClientIDMode="Static"/>