1

作为一个虚拟通知，我希望在单击我的提交按钮时弹出一个成功对话框。我使用了在 SO 上找到的脚本，但由于某种原因，它仍然无法正常工作。我已经尝试将脚本声明为function myFunction()并在其中调用它，action="myFunction()但它仍然不起作用。

我的html：

<!-- HTML of contact form -->

    <section id="contact">
        <div class="inner">
          <h2>Drop me a line. <i class="title_line"></i> </h2>
          <p class="lead"> Don't hesitate to send me an email.<br>
            I’d love to hear from you! </p>
          <div class="row">
            <div class="col1">
              <form name="htmlform" method="post" action="" dir="ltr" lang="en" class="">
                <label>Name<span class="required">*</span></label>
                <input type="text" name="first_name" placeholder="Your Name" required>
                <label>Email<span class="required">*</span></label>
                <input type="email" name="email" placeholder="E-Mail" required>
                <label>Message<span class="required">*</span></label>
                <textarea name="comments" cols="1" rows="5" placeholder="Tell me everything" required></textarea>
                <button name="send" id="emailsend" type="submit" lang="en" class="submit">Send</button>
              </form>

                  <div id="le-alert" class="alert alert-success fade">
                    <button href="#" type="button" class="close">&times;</button>
                    <h4>Alert title</h4>
                    <p>Roses are red, violets are blue...</p>
                  </div>
            </div>
            <div class="col2">
              <h4>Meet Me</h4>
              <br>
              <p>1234 SE 42nd St.</p>
              <p>Mercer Island, WA </p>
              <p>USA </p>
              <h4>My Email</h4>
              <br>
              <p><a href="mailto:vik.yaban@gmail.com">vik.yaban@gmail.com</a></p>
              <h4>Employement</h4>
              <br>
              <p><a href="#">vik.yaban@gmail.com</a></p>
            </div>
          </div>
        </div>

        <div id="success-alert" class="alert alert-success fade">
        <button class="close" type="button" data-dismiss="alert"></button>
         <h4 class="alert-heading">Success!</h4>
        <p>Email Sent!</p>
    </div>
      </section>
     <!-- End Contact Form -->

    <!-- Javascript to make the dialog -->
        <script type="text/javascript">$('#emailsend').click(function () {
      $('#success-alert').addClass('in'); // shows alert with Bootstrap CSS3 implementation
    });

    $('.close').click(function () {
      $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implementation
    });</script>
<!-- End Javascript -->
4

1 回答 1

0

您可以在 document.ready 函数中尝试您的 jquery 代码。

$(document).ready(function(){
    $('#emailsend').click(function () {
      $('#success-alert').addClass('in'); // shows alert with Bootstrap CSS3 implementation
    });

    $('.close').click(function () {
      $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implementation
    });

})
于 2013-09-01T05:46:07.003 回答