Javascript 如何在单击锚定标记而不是页面加载时调用以下弹出功能？_Javascript_Jquery_Html

Javascript 如何在单击锚定标记而不是页面加载时调用以下弹出功能？

javascript jquery html

Javascript 如何在单击锚定标记而不是页面加载时调用以下弹出功能？,javascript,jquery,html,Javascript,Jquery,Html,以下是加载页面时弹出的代码： <!doctype HTML> <html> <head>  <script src="jquery-1.9.1.min.js" type="text/javascript"></script>  <script src="jquery.easing.mi

以下是加载页面时弹出的代码：

<!doctype HTML>
<html>
  <head>
    <!-- jQuery -->
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <!-- jQuery easing plugin -->
    <script src="jquery.easing.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="mhead">
      <h2>Multi Step Form with Progress Bar using jQuery, CSS3 and PHP - <span class="red">Info</span>Tuts</h2>
    </div>
    <!-- multistep form -->
    <form id="msform">
        <!-- progressbar -->
        <ul id="progressbar">
            <li class="active">Account Setup</li>
            <li>Social Profiles</li>
                <li>Personal Details</li>
            </ul>
            <!-- fieldsets -->
            <fieldset>
                <h2 class="fs-title">Create your account</h2>
                <h3 class="fs-subtitle">This is step 1</h3>
                <div class="fs-error"></div>
                <input type="text" name="email" id="email" placeholder="Email" />
                <input type="password" name="pass"  id="pass" placeholder="Password" />
                <input type="password" name="cpass"  id="cpass" placeholder="Confirm Password" />
              <input type="button" name="next" class="next action-button" value="Next" />
            </fieldset>
            <fieldset>
                <h2 class="fs-title">Social Profiles</h2>
                <h3 class="fs-subtitle">Your presence on the social network</h3>
                <input type="text" name="twitter" placeholder="Twitter" />
                <input type="text" name="facebook" placeholder="Facebook" />
                <input type="text" name="gplus" placeholder="Google Plus" />
                <input type="button" name="previous" class="previous action-button" value="Previous" />
                <input type="button" name="next" class="next action-button" value="Next" />
            </fieldset>
            <fieldset>
                <h2 class="fs-title">Personal Details</h2>
                <h3 class="fs-subtitle">We will never sell it</h3>
                <div class="fs-error"></div>
                <input type="text" name="fname" id="fname" placeholder="First Name" />
                <input type="text" name="lname" id="lname" placeholder="Last Name" />
                <input type="text" name="phone" id="phone" placeholder="Phone" />
                <textarea name="address" id="address" placeholder="Address"></textarea>
                <input type="button" name="previous" class="previous action-button" value="Previous" />
                <input type="submit" name="submit" class="submit action-button" value="Submit" />
            </fieldset>
      </form>
  </body>
</html>

以下是相关的jQuery代码：

$(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('<span style="color:red;"> Please Enter First Name !</span>');
      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('<span style="color:red;"> Email is invalid !</span>');
    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('<span style="color:red;"> Passords do not match !</span>');
      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;
  } 
}

现在我想在点击锚定标签时显示这个弹出窗口。锚定标签如下所示：

<a class="drop-dwn-adevent" href="#">Add Event</a>

我应该如何在单击锚定标记时显示此弹出窗口

请帮帮我

注意：如果您想查看my code的实时示例，请转到以下链接：

将其包装在单击事件中：

$(function() {

    // Initially hide form
    var myForm = $("#msform").hide();

    // Bind to anchor click event
    $(".drop-dwn-adevent").on("click", function(event){
        event.preventDefault(); // Prevent default anchor behaviour

        myForm.show(); // or .fadeIn() or whatever jQuery animation
    });

});

提供一个小提琴演示。@Manwal：在我问题的结尾，我提供了一个链接，它只是我在一个问题中编写的代码的工作副本。我的疑问是，点击超链接后，我该如何使这件事变得可行？@Manwal：当你打开我给你的链接时，你会看到一张要求创建你的帐户的表格。一旦您感觉到所有这些信息并单击“下一步”，就会打开另一个弹出窗口，以此类推。实际上，我想打开第一个表单，即单击锚定标记创建帐户表单。我该怎么做？那不是弹出窗口。这只是一个Div的块通过jquery和css滑动。如果您想使用锚定标记执行此操作，您需要了解此滑动是如何工作的。@Manwal：首先，页面上将只显示锚定标记。然后，当用户单击锚定标记时，包含表单的一些字段的第一个div应该出现，依此类推。我该怎么做？