javascript - 在 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

查看果汁用户界面。它将 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 对话框文档的链接