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结构 - ＆gt;

<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 - ＆gt;

$(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

在Asp.net中弹出表单

3 个答案: