Bootstrap Modal Popup Jquery Post validation how?

Question

I am trying to create a popup and form with validation but for some reason my modal is not appearing.

<div id="thanks" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
  <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Redeem Points</h4>
    </div>
    <div class="modal-body">
     <form class="form-horizontal"  class="contact" name="commentform" method="post" action="<?php bloginfo('template_url'); ?>/sendredeempoints.php" enctype="multipart/form-data">
            <div class="form-group">
            <h3>You may only redeem the maxium points of : <?php echo $maxpoints;?></h3>
                <input type="hidden" name="playerid" value="<?php echo $playerId;;?>" />
                  <input type="number"  valuemax="<?php echo $maxpoints;?>" name="points" class="form-control" placeholder="How many points do you wish to redeem." />                  
                   <label class="control-label col-md-4" for="Comments">Comments?</label>


        </div>
        <div class="form-group">
                <div class="col-md-6">
                    <button title="" data-original-title="" type="submit" value="Submit" class="btn btn-custom pull-right" id="send_btn">Send</button><div style="top: -4px; left: 279px; display: block;" class="popover fade right in"><div class="arrow"></div><h3 style="display: none;" class="popover-title"></h3><div class="popover-content">Thank You</div></div>
                </div>
            </div>
        </form>
    </div><!-- End of Modal body -->
    </div><!-- End of Modal content -->
    </div><!-- End of Modal dialog -->
</div><!-- End of Modal -->

I am using the jquery below to go to my processing file but for some reason my modal dialog is not appearing its just brigning the see thru div up but no dialog?? And yes i do have lattest bootstrap and js installed in my headers of theme

<script>
 $(function () {
     //twitter bootstrap script
     $("button#submit").click(function () {
         $.ajax({
             type: "POST",
             url: "process.php",
             data: $('form.contact').serialize(),
             success: function (msg) {
                 $("#thanks").html(msg)
                 $("#form-content").modal('hide');
             },
             error: function () {
                 alert("failure");
             }
         });
     });
 });
</script>

Process.php

<?php         
$playerid = $_POST['playerid']; // required        
$points = $_POST['points']; // required
$mymessage = $_POST['userMessage']; // required    
$email_from='davidbuckleyni@gmail.com';
$email_subject = $_POST['mysubject'];
$email_to =$_POST['toEmail'];

$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $mymessage, $headers);
?>

Edit Ok the div is now appearing ok but it just reffuses to do the ajax request bringing me to a page not found in wordpress even though the php is in the same directory as this php file.

Answer 1

Bootstrap modal cannot show itself. If you want to show the Modal you have to call it.

Show modal when clicking a button:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#thanks">
    Show modal
</button>

Show modal after page loaded:

$(window).load(function () {
        $('#thanks').modal('show');
    })