在ASP.NET中通過Jquery UI創建彈出式註冊表格

Question

我是jquery的新手用戶。只需要您寶貴的建議。

我需要通過jquery UI彈出註冊表單。我有一個按鈕，當按下時應該 顯示用戶註冊的彈出窗體。

我已經下載了jquery的用戶界面，但不知道如何使用它的彈出窗體？

想到之前vting vting。

謝謝。

Answer 1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> 
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>  


$(".btnClassName").live('click',function(){ 
    if($('div.ui-dialog').length){ 
     $('div.ui-dialog').remove(); 
    } 


    var $dialog = $('<div>', { 
     title: 'Registration Form' 
    }).dialog({ 
     autoOpen: false, 
     modal: true, 
     width: 600, 
     height: 500, 
     closeOnEscape: false, 

     buttons: { 
     "Cancel": function() { 
      $(this).dialog("close"); 
      $(this).dialog('destroy'); 
     } 

     "Submit" : function(){ 
     //Here you will call another function that will take your form values 
     //and post it to your php file to Insert 
     getAndValidateForm(); 
     } 
    } 
    }); 

    var tab = '<div>Put your HTML here for the form!</div>'; 

    $('<div>').html(tab).appendTo($dialog); 
    $dialog.dialog('open'); 
    return false; 

}); 

getAndValidateForm(){ 
get your form values like this 
var name = $("#id_of_name").val(); 
    //same for another elements 
    //validate it like this 
    if(!name){ 
    //name is not given.do what u want to do 
    return false; 
    } 

    //now make Ajax Request to your PHP file and post all your data 

     $.post(your Url, { 
       data : your data 
      }, function(data){ 
       data = $.trim(data); 
       if(data){ 
        //do what you want to do 
       } 
      }); 
    } 

我希望你現在清除。

Answer 2

這已經是jqueryui.com

進口jQuery庫第一

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> 

導入下一個jQueryUI的庫jQuery庫

<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>  

的文檔。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#Register').click(function(){ 
      $('#RegistrationForm').dialog(); 
     }); 
    }); 
</script> 
<div id="RegistrationForm"> 
    Your Registration Form contents here 
</div> 
<input type="button" id="Register"/>