Question

我正在尝试创建一个带有验证的弹出窗口和表单但由于某种原因我的模态没有出现。

<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转到我的处理文件但是由于某种原因我的模态对话框没有显示它刚刚开始看到通过div而没有对话框？是的，我确实在我的主题标题

中安装了lattest bootstrap和js

<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);
?>

修改好吧div现在看起来还不错，但它只是重新执行ajax请求，将我带到wordpress中找不到的页面，即使php与此php文件位于同一目录中。

Answer 1

Bootstrap模式无法显示自身。如果你想要显示模态，你必须调用它。

点击按钮时显示模态：

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

在页面加载后显示模态：

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

Bootstrap Modal Popup Jquery Post验证如何？

1 个答案: