Jquery ui 在ASP.NET中通过Jquery UI创建弹出式注册表

我是jquery的新手用户。只需要你有价值的建议

我需要通过Jquery UI弹出一个注册表单。我有一个按钮，按下时应该 显示用于用户注册的弹出表单

我已经下载了Jquery UI，但不知道如何将其用于弹出表单

三思而后行

谢谢。

 <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  
                } 
            });
    }

$（“.btnClassName”）.live（'click'，function（）{
if（$（'div.ui-dialog'）.length）{
$（'div.ui-dialog'）。删除（）；
}
变量$dialog=$（''{
标题：“登记表”
}).对话({
自动打开：错误，
莫代尔：是的，
宽度：600，
身高：500，
closeOnEscape：错误，
按钮：{
“取消”：函数（）{
$（此）.dialog（“关闭”）；
$（this.dialog（'destroy'）；
}
“提交”：函数（）{
//在这里，您将调用另一个函数，该函数将采用您的形式值
//并将其发布到php文件以插入
getAndValidateForm（）；
}
}
});
var tab='将表单的HTML放在这里！'；
$（''）.html（制表符）.appendTo（$dialog）；
$dialog.dialog（'open'）；
返回false；
});
getAndValidateForm（）{
像这样获取表单值
var name=$（“#id_of_name”）.val（）；
//其他元素也是如此
//像这样验证它
如果（！name）{
//没有给出名字。做你想做的事
返回false；
}
//现在向PHP文件发出Ajax请求并发布所有数据
$.post（您的Url{
数据：你的数据
}，函数（数据）{
数据=$.trim（数据）；
如果（数据）{
//做你想做的事
} 
});
}

---

我希望你现在明白了。

它已经在

首先导入jquery库

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

导入jquery库旁边的jqueryui库

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

$（文档）.ready（函数（）{
$（'#Register'）。单击（函数（）{
$（“#注册表单”）.dialog（）；
});
});
您的登记表内容在这里

<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"/>