javascript - Asp.net でフォームをポップアップ

Question

ポートフォリオ Web サイトを構築していますが、そのためには再登録フォームを使用する必要があります。多くの Web サイトで、登録フォームがポップアップ表示されるのを見てきました。たとえば、登録ボタンをクリックすると、フォームがポップアップし (同時に同じページに留まります)、フォームに入力して送信できます。つまり、javascript または jquery には、そのタイプの pop フォームを取得するために自分のサイト コードに統合できるそのタイプのコードがあるということです。

Answer 1

Yes, this is done with JavaScript and can be done with jQuery. Here's a bare bones example to get you started: it'll toggle the display for the registration form, but you might want to add some animations in the jQuery or styles/positioning in the CSS.

HTML:

<button>Register</button>

<div id="popup">
    <form action="post" action="/register">
        <!-- form stuff... -->
    </form>
</div>

jQuery:

$('button').click(function() {
    $('#popup').toggle();
});

Answer 2

Check out Juice UI. It wraps jQueryUI stuff up into asp.net server controls. The dialog control is likely what you are looking for.

Answer 3

私が jQuery UI を使用するのは、そのドキュメント、サポート、および機能のためだけです。

これが実際に動作している jsFiddle の例です。

ここにHTML構造があります - >

<div><a href="#" id="register"> Register </a></div>
<div class="register-popup">
  <form>
    <label for="fname"> First Name </label><br/>
    <input type="text" name="fname"/><br/><br/>
    <label for="fname"> First Name </label><br/>
    <input type="text" name="lname"><br/><br/>
  </form>
</div>

ここにjQueryがあります->

$(function(){
  $('#register').on('click', function(){
     $('.register-popup').dialog('open');  
  });
  $('.register-popup').dialog({
    autoOpen: false,
    modal: true,
    width: '280',
    height: '300',
    title: 'Register Here',
    buttons: {
      'Register Now!': function(){
        $.ajax({
            url: 'path/to/registration/controller',
            type: 'POST',
            data: $(this).find('form').serialize(),
            success: function(data){
              console.log('This is where the data is returned from your controller to the web page');
              $(this).dialog('close');                  
            }
        });                 
      }
    }       
  });    
});

jQuery UI ダイアログのドキュメントへのリンクは次のとおりです。