在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