2015-10-29 140 views
0

我想創建一個彈出式窗體和驗證,但由於某種原因,我的模態沒有出現。Bootstrap Modal Popup Jquery後驗證如何?

<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 --> 

我使用jQuery下面去我處理文件,但由於某種原因,我的模式對話框不顯示它只是brigning的看到通格了,但沒有對話?是的,我確實有安裝在我的主題標題

<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='[email protected]'; 
$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); 
?> 

編輯 確定股利現已出現確定,但它只是reffuses做整合了最新的引導和js ajax請求把我帶到了一個在wordpress中找不到的頁面,儘管php和這個php文件在同一個目錄中。

+0

與代碼有問題,這是模態的樣子http://jsfiddle.net/v1tv4x1q/1 /沒有問題那裏 – Shehary

+0

@Shehary是的,但是我發現它沒有找到php文件,但我保存在我的wordpress主題的同一目錄中。 – rogue39nin

+0

@Shehary認罪看到我上次編輯 – rogue39nin

回答

0

引導模式不能顯示自己。如果你想顯示模態,你必須調用它。

顯示模式單擊按鈕時:

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

顯示模式加載頁面後:

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

這不是問題在這裏將標記爲u obv沒有讀取電子信息 – rogue39nin