javascript - 表单提交后模态仍然出现

Question

我在 HTML 页面中有一个用于客户注册的模式，在用户输入所有数据后，我希望该模式在表单提交后可用，并且只是显示已添加的警报消息成功了，如何做到这一点？

HTML 页面

<div class="modal-body">
<form action="AddNCustomer.php" target="" method="post" enctype="multipart/form-data">
    <div class="row">
        <div class="col-sm-4">
            <label class="Modallabel">First Name:</label>
        </div>
        <div class="col-sm-8">
            <div class="input-group input-group-sm" style="margin-top: -5px;">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input id="FName" type="text" class="form-control ModalInput" name="FName" placeholder="First Name">
            </div><br>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <label class="Modallabel">Last Name:</label>
        </div>
        <div class="col-sm-8">
            <div class="input-group input-group-sm" style="margin-top: -5px;">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input id="LName" type="text" class="form-control ModalInput" name="LName" placeholder="Last Name">
            </div><br>
        </div>
    </div>
      //rest of input fields go here....
    <div class="row">
        <button id="submit" name="submit" class="btn btn-success btn-md" style="margin:0;width: 75px;">Add</button>
    </div>
</form>

PHP 页面

<?php
  include_once "connect.php";

if(isset($_POST['submit'])){
    $FName = $_POST['FName'];
    $LName = $_POST['LName'];
    $NName = $_POST['NName'];
    $FaceName = $_POST['FaceName'];
    $email = $_POST['email'];
    $BDate = $_POST['BDate'];
    $OName = $_POST['OName'];
    $CelfoneNumber = $_POST['CelfoneNumber'];
    $LandlineNumber = $_POST['LandlineNumber'];
    $Latitude = $_POST['Latitude'];
    $Longitude = $_POST['Longitude'];
    $c_image = $_FILES['fileUpload']['name'];
    $c_image_tmp = $_FILES['fileUpload']['tmp_name'];

    move_uploaded_file($c_image_tmp,"../CustomerImages/$c_image");
    //To check if the customer is already entered before
    $query="SELECT * from Customers where email_address_='".$_POST["email"]."'";
    $queryresult = $conn->query($query)->fetchAll(PDO::FETCH_ASSOC);

    if (count($queryresult) == 0)
    {
        //To get the largest customer id to add a new one
        $sql="SELECT MAX(Cust_id) as max FROM Customers";

        foreach ($conn->query($sql) as $row1)
        {
            $CustID=$row1['max'] + 1;
        } 

        //Inserting the customer details in table customer
        $stmt = "INSERT INTO Customers (first_name_,last_name_,nick_name_,facebook_name_,email_address_,birthdate_,name_of_organization_,celfone_no_,landline_no_,_delivery_location_1_coordinates__longitude,_delivery_location_1_coordinates__latitude,photo_,Cust_id) VALUES (:Fname,:Lname,:Nname,:Facename,:Email,:BDate,:Oname,:Cphone,:Lphone,:latvalue,:lngvalue,:Photo,:CustID)";

        $result=$conn->prepare($stmt);
        $result->bindparam(':Fname', $FName, PDO::PARAM_INT);
        $result->bindparam(':Lname', $LName, PDO::PARAM_INT);
        $result->bindparam(':Nname', $NName, PDO::PARAM_INT);
        $result->bindparam(':Facename', $FaceName, PDO::PARAM_INT);
        $result->bindparam(':Email', $email, PDO::PARAM_INT);
        $result->bindparam(':BDate', $BDate, PDO::PARAM_INT);
        $result->bindparam(':Oname', $OName, PDO::PARAM_INT);
        $result->bindparam(':Cphone', $CelfoneNumber, PDO::PARAM_INT);
        $result->bindparam(':Lphone', $LandlineNumber, PDO::PARAM_INT);
        $result->bindparam(':latvalue', $Latitude, PDO::PARAM_INT);
        $result->bindparam(':lngvalue',$Longitude, PDO::PARAM_INT);
        $result->bindparam(':Photo',$c_image, PDO::PARAM_INT);
        $result->bindparam(':CustID',$CustID, PDO::PARAM_INT);
        if($result->execute()) 
            { 
                echo "<script>alert('Account has been created successfully, Thanks!')</script>";                    
            } 
        else 
            { 
                echo "Failure!"; 
            }
    }
}
?>

Answer 1

看看=> http://getbootstrap.com/2.3.2/javascript.html#modals

使用

data-backdrop="static"

或

$("#yourModal").modal({"backdrop": "static"});

在您的链接上打开模式==>

<a href="#" onclick="$('#yourModal').modal({'backdrop': 'static'});" class="btn btn-primary">yourModal</a>

编辑2:

http://jsfiddle.net/BVmUL/39/