jquery-ui - ASP.NET で Jquery UI を介してポップアップ登録フォームを作成する

Question

私はjqueryの初心者です。あなたの貴重な提案だけが必要です。

Jquery UIを介したポップアップ登録フォームが必要です。押されたときにユーザー登録用のポップアップフォームを表示するボタンがあります。

Jquery UI をダウンロードしましたが、ポップアップ フォームに使用する方法がわかりません。

ダウンする前に考えてください。

ありがとうございました。

Answer 1

すでにjqueryui.comのドキュメントに記載されています

最初に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>    

.

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

Answer 2

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

あなたが今クリアであることを願っています。