Question

我已经创建了一个表单，然后通过jquery进行验证。我的问题是，一旦表单已经提交，我希望bootstraps模式弹出一个确认消息，到目前为止我还没能做到。

我的HTML

<div class="newsletter_email">
    <div id="newsletter_modal" class="modal fade" aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content col-lg-12">
                <div class="modal-header">
                    <button class="close" aria-label="Close" data-dismiss="modal" type="button">
                    <h4 id="myModalLabel" class="modal-title">Form</h4>
                    <p>This is the header</p>
                </div>
                <div class="modal-body">this is the body</div>
                <div class="modal-footer">
                    <p>this is the footer</p>
                </div>
            </div>
        </div>
    </div>
    <input id="email" class="email has-error" type="text" placeholder="Enter your email address" name="email" style="border: medium none;">
    <button class="submit" data-target="#newsletter_modal" data-toggle="modal" value="">
        submit
    </button>
    <div class="error-success" style="display:none;"></div>
    </div>
</div>

我的JS

$(".submit").on("click", function(e){
    e.preventDefault();
    $error = 0;

    $email = $.trim($("#email").val());

    if(!isValidEmailAddress($email)){
        $("#email").parents(".form-group:first").addClass("has-error");
        $("#email").css({"border":"solid 1px red"});
        $error = 1;
    }

    if($error == 1){
        $(".newsletter_email .alert.alert-success").hide();
        $(".newsletter_email .alert.alert-danger").fadeIn(500);

        return false;
    }

    var request = $.ajax({
        type: 'POST',
        url: "ajax/newsletterSubscription.php",
        data: {email: $email},
        dataType: 'json',
        encode: true
    })
    .done(function(data){
        if(data.message == 'success'){
            $('.newsletter_email').trigger("reset");



            $(".newsletter_email .alert.alert-danger").hide();
            $("#email").css({"border":"none"});
            // $(".newsletter_email .alert.alert-success").fadeIn(250);

        }
    });

    return false;
});

Answer 1

您需要先创建模态，然后才能阅读此Create Bootstrap Modal

if(data.message == 'success'){
            $('.newsletter_email').trigger("reset");
         $('#myModal').modal('show'); //Show the modal when result is success


            $(".newsletter_email .alert.alert-danger").hide();
            $("#email").css({"border":"none"});
            // $(".newsletter_email .alert.alert-success").fadeIn(250);

        }

获取引导模式以在jquery中显示

1 个答案: