jQuery注册表单onclick弹出窗口

Question

I am trying to make a Javascript JQuery registration form pop-up on link click.

So I have this button:

<a href="#" class="cta">REGISTER NOW</a>

And I`m trying to make it pop-up a small simple html registration form that I can store in a hidden registration DIV. Example:

<div name="reg" style="visibility:hidden;">reg form</div>

I just need the simple registration form (Only full name and email) to pop-up (centered and mobile responsive) when that button is linked.

Can I get any help in doing this? Thank you. I have tried with jquery dialog and almost everything found on Google, but it doesn't seem to work. Thanks.

Answer 1

You should really be using a class or id on you register div instead, but you can show the form like this:

$('.cta').click(function() {
    $('div[name="reg"]').css('visibility', 'visible');
})

Once you give your div a proper class/id, you can replace div[name="reg"] with .class or #id . Additionally, jQuery has several built-in functions for hiding and showing elements. To use these, you'll want to change visibility:hidden; with display:none; . Then, in the code I presented above, replace .css(...) with one of the following:

• .show() is an immediate effect, and is the same as changing the display property to block . To remove again, use .hide() .
• .fadeIn() , as the name suggests, is more of a gradual fading effect. Opposite of .fadeOut() .
• slideDown() is similar to an "accordian" effect, where the element starts at 0 height and "grows". Opposite of .slideUp() .

You can also use .toggle() , .fadeToggle() , or slideToggle() , respectively to alternate between showing and hiding the elements.

I've created this JSFiddle to demonstrate these effects.

Answer 2

As suggested by Mihailo , you could use Bootstrap Modals to make it responsive (mobile, tablet and PC).

<a data-toggle="modal" data-target=".bs-example-modal-sm" role="button" class="">Launch demo modal</a>

<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Registration</h4>
      </div>
      <div class="modal-body">
        <form name="reg-form">
          <div class="form-group">
            <label for="user-name" class="control-label">Full Name:</label>
            <input type="text" class="form-control" id="user-name">
          </div>
          <div class="form-group">
            <label for="email" class="control-label">Email Address:</label>
            <input type="text" class="form-control" id="email">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Here is the thing, there is a modal template with header section, body section and footer section.

div class="modal fade bs-example-modal-sm"

If you remove fade , then the modal will not animate.

More information regarding bootstrap modals is here

Also, Please find the corresponding JsFiddle below: https://jsfiddle.net/Manoj85/7egtc2ne/5/

Hope this helps!!

Answer 3

Assuming you have a div called register, which you need to add, it will be like this:

 <script> 
    $(".cta").click(function() {
        $("#register").css("hidden", false)
     })
 </script>