title: How to call following pop-up functionality on click of an anchor tag instead of on page load?
body: <p>Following is the code for pop-up when the page loads :</p>
  
  <pre><code>&lt;!doctype HTML&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;!-- jQuery --&gt;
      &lt;script src="jquery-1.9.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- jQuery easing plugin --&gt;
      &lt;script src="jquery.easing.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="script.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="mhead"&gt;
        &lt;h2&gt;Multi Step Form with Progress Bar using jQuery, CSS3 and PHP - &lt;span class="red"&gt;Info&lt;/span&gt;Tuts&lt;/h2&gt;
      &lt;/div&gt;
      &lt;!-- multistep form --&gt;
      &lt;form id="msform"&gt;
          &lt;!-- progressbar --&gt;
          &lt;ul id="progressbar"&gt;
              &lt;li class="active"&gt;Account Setup&lt;/li&gt;
              &lt;li&gt;Social Profiles&lt;/li&gt;
                  &lt;li&gt;Personal Details&lt;/li&gt;
              &lt;/ul&gt;
              &lt;!-- fieldsets --&gt;
              &lt;fieldset&gt;
                  &lt;h2 class="fs-title"&gt;Create your account&lt;/h2&gt;
                  &lt;h3 class="fs-subtitle"&gt;This is step 1&lt;/h3&gt;
                  &lt;div class="fs-error"&gt;&lt;/div&gt;
                  &lt;input type="text" name="email" id="email" placeholder="Email" /&gt;
                  &lt;input type="password" name="pass"  id="pass" placeholder="Password" /&gt;
                  &lt;input type="password" name="cpass"  id="cpass" placeholder="Confirm Password" /&gt;
                &lt;input type="button" name="next" class="next action-button" value="Next" /&gt;
              &lt;/fieldset&gt;
              &lt;fieldset&gt;
                  &lt;h2 class="fs-title"&gt;Social Profiles&lt;/h2&gt;
                  &lt;h3 class="fs-subtitle"&gt;Your presence on the social network&lt;/h3&gt;
                  &lt;input type="text" name="twitter" placeholder="Twitter" /&gt;
                  &lt;input type="text" name="facebook" placeholder="Facebook" /&gt;
                  &lt;input type="text" name="gplus" placeholder="Google Plus" /&gt;
                  &lt;input type="button" name="previous" class="previous action-button" value="Previous" /&gt;
                  &lt;input type="button" name="next" class="next action-button" value="Next" /&gt;
              &lt;/fieldset&gt;
              &lt;fieldset&gt;
                  &lt;h2 class="fs-title"&gt;Personal Details&lt;/h2&gt;
                  &lt;h3 class="fs-subtitle"&gt;We will never sell it&lt;/h3&gt;
                  &lt;div class="fs-error"&gt;&lt;/div&gt;
                  &lt;input type="text" name="fname" id="fname" placeholder="First Name" /&gt;
                  &lt;input type="text" name="lname" id="lname" placeholder="Last Name" /&gt;
                  &lt;input type="text" name="phone" id="phone" placeholder="Phone" /&gt;
                  &lt;textarea name="address" id="address" placeholder="Address"&gt;&lt;/textarea&gt;
                  &lt;input type="button" name="previous" class="previous action-button" value="Previous" /&gt;
                  &lt;input type="submit" name="submit" class="submit action-button" value="Submit" /&gt;
              &lt;/fieldset&gt;
        &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Following is the concerned jQuery code :</p>
  
  <pre><code>$(document).ready(function() {
    jQuery('#sucess').hide();
    var current_fs, next_fs, previous_fs; //fieldsets
    var left, opacity, scale; //fieldset properties which we will animate
    var animating; //flag to prevent quick multi-click glitches
    $(".next").click(function(event) {
      var fv=formValidation(event);
      if(fv) {
      } else {
        return false;
      }
  
      if(animating) return false;
        animating = true;
  
        current_fs = $(this).parent();
        next_fs = $(this).parent().next();
  
        //activate next step on progressbar using the index of next_fs
        $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
  
        //show the next fieldset
        next_fs.show(); 
        //hide the current fieldset with style
        current_fs.animate({opacity: 0}, {
          step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
              //1. scale current_fs down to 80%
              scale = 1 - (1 - now) * 0.2;
              //2. bring next_fs from the right(50%)
              left = (now * 50)+"%";
              //3. increase opacity of next_fs to 1 as it moves in
              opacity = 1 - now;
              current_fs.css({'transform': 'scale('+scale+')'});
              next_fs.css({'left': left, 'opacity': opacity});
          }, 
          duration: 800, 
          complete: function(){
              current_fs.hide();
              animating = false;
          }, 
          //this comes from the custom easing plugin
          easing: 'easeInOutBack'
        });
    });
  
    $(".previous").click(function(){
        if(animating) return false;
        animating = true;
  
        current_fs = $(this).parent();
        previous_fs = $(this).parent().prev();
  
        //de-activate current step on progressbar
        $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
  
        //show the previous fieldset
        previous_fs.show(); 
        //hide the current fieldset with style
        current_fs.animate({opacity: 0}, {
            step: function(now, mx) {
                //as the opacity of current_fs reduces to 0 - stored in "now"
                //1. scale previous_fs from 80% to 100%
                scale = 0.8 + (1 - now) * 0.2;
                //2. take current_fs to the right(50%) - from 0%
                left = ((1-now) * 50)+"%";
                //3. increase opacity of previous_fs to 1 as it moves in
                opacity = 1 - now;
                current_fs.css({'left': left});
                previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
            }, 
            duration: 800, 
            complete: function() {
                current_fs.hide();
                animating = false;
            }, 
            //this comes from the custom easing plugin
            easing: 'easeInOutBack'
        });
    });
  
    $("#msform").submit(function() {
  
      var fname=jQuery('#fname').val();
      if ($.trim(fname).length == 0) {
        document.getElementById("fname").style.borderColor = "#E34234";
        jQuery('.fs-error').html('&lt;span style="color:red;"&gt; Please Enter First Name !&lt;/span&gt;');
        jQuery('.fs-error').show();
        return false;
      } else {
        jQuery('.fs-error').hide();
        var serializedReturn = formData();
  
        window.location = "http://localhost/multistepform/success.php";
          return false;   
        }
    });
  });
  
  function formData() {
    var serializedValues = jQuery("#msform").serialize();
      var form_data = {
      action: 'ajax_data',
      type: 'post',
      data: serializedValues,
    };
    jQuery.post('insert.php', form_data, function(response) {
        alert(response);
        // document.getElementById("sucess").style.color = "#006600";
       // jQuery('#sucess').show();
    });
  
    return serializedValues;
  }
  
  function formValidation(e) {
  
    var emailval=jQuery('#email').val();
      var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  
    // Checking Empty Fields
    var vemail=mailformat.test(emailval)
    if ($.trim(emailval).length == 0 || vemail==false) {
      jQuery('.fs-error').html('&lt;span style="color:red;"&gt; Email is invalid !&lt;/span&gt;');
      return false;
    } else {
        jQuery('.fs-error').hide();
    }
  
      var pass1 = document.getElementById("pass").value;
    var pass2 = document.getElementById("cpass").value;
  
    if (pass1 != pass2 || pass1 == '') {
      //alert("Passwords Do not match");
      document.getElementById("pass").style.borderColor = "#E34234";
      document.getElementById("cpass").style.borderColor = "#E34234";
        jQuery('.fs-error').html('&lt;span style="color:red;"&gt; Passords do not match !&lt;/span&gt;');
        jQuery('.fs-error').show();
      return false
    } else {
      document.getElementById("pass").style.borderColor = "#006600";
      document.getElementById("cpass").style.borderColor = "#006600";
          jQuery('.fs-error').hide();
          return true;
    } 
  }
  </code></pre>
  
  <p>Now I want to show this pop up on click of anchor tag. The anchor tag is as follows :</p>
  
  <pre><code>&lt;a class="drop-dwn-adevent" href="#"&gt;Add Event&lt;/a&gt;
  </code></pre>
  
  <p>How should I display this pop-up on click of anchor tag?</p>
  
  <p>Please help me.</p>
  
  <p>N.B. : If you want to see the live example of my code go to following link :<a href="http://www.infotuts.com/demo/multistep-form-css3-jquery-php/" rel="nofollow">http://www.infotuts.com/demo/multistep-form-css3-jquery-php/</a></p>