在Asp.net中彈出表格

Question

我正在建立我的投資組合網站，為此，我需要使用重新注冊表格。 在許多網站上，我看到了彈出的注冊表。 例如，當您單擊注冊按鈕時，會彈出一個表單（同時您留在同一頁面中），然后可以填寫表單並提交。 所以我的意思是javascript或jquery是否具有可以集成到我的網站代碼中的那種類型的代碼，以獲得那種流行形式。

Answer 1

是的，這是使用JavaScript完成的，也可以使用jQuery完成。 這是一個入門的簡單示例：它將切換注冊表單的顯示，但是您可能想要在jQuery中添加一些動畫或在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

查看Juice UI 。 它將jQueryUI內容包裝到asp.net服務器控件中。 對話框控件可能是您想要的。

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對話框文檔的鏈接