在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服務器控件中。 dialog控件可能是你正在尋找的。

Answer 3

我會使用jQuery UI，因爲它的文檔，支持和功能。

Here's a working jsFiddle example of this in action

這裏的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');     
      } 
     });     
     } 
    }  
    });  
}); 

Here's the link to the jQuery UI Dialog Documentation