Tuesday, May 8, 2012

JQuery Modal Dialog with Aspx Page example

who wants a good jquery experience with asp? like open a new window in a modal dialog BUT the new window will be ANOTHER aspx page?
int the main aspx page put somewhere a div with an ID, totaly empty with an HTML btn, only id:
<div id="divForAspxPage" ></div>        
<input id="btnOpenAspx" type="button" value="open aspx page" />

the jquery part:  (for more about modal dialog and the JS files: http://jqueryui.com/demos/dialog/#modal-form )

<script type="text/javascript">     
    $(function() {
         $( "#btnOpenMyAspx" ).button().click(function() {          
              $( "#divForAspxPage" ).dialog({           
                  autoOpen: true,
                  height: 500,           
                  width: 650,
                  modal: true,
                  close:function(){
                       $(this).dialog('destroy');           
                  }       
              });          
              $.get("/NewPage.aspx",function(data){              
                    $( "#divForAspxPage" ).html(data);
              });   
        });  
    });
</script>

some information about all that:
height/width - yes u can adjust it as u like
keep the destroy if u want to open it multi times
you can send stuff in the StringQuery like "/NewPage.aspx?a=1&b=2"

No comments:

Post a Comment