在提交按鈕單擊時打開引導成功對話框

作爲虛擬通知，我想要一個成功對話框，以彈出按鈕單擊我的提交按鈕。我已經使用了在這裏找到的腳本，但由於某種原因，它仍然無效。我已經嘗試將腳本聲明爲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:[email protected]">[email protected]</a></p> 
       <h4>Employement</h4> 
       <br> 
       <p><a href="#">[email protected]</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 -->

來源

2013-09-01 ThatGuyThere

你可以嘗試的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-01 05:46:07

在提交按鈕單擊時打開引導成功對話框

回答

相關問題