Comment fermer un bootstrap de modal et de redirection après le succès d'alerte affiché

Cette réponse, c'est juste un exemple pour une parfaite idée de comment le réaliser, ce qui OP demandé dans la question.

1. Soumettre un formulaire intégré dans le modal.

Modale À Partir De

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Modal Form</h4>
</div>
<form id="myform" class="form-horizontal" role="form" method="POST">
<div class="modal-body">
<div class="form-group">
<div class="col-md-12">
<label class="control-label popup-label">First Name</label>
<input required type="text" class="form-control" name="firstname" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label class="control-label popup-label">Last Name</label>
<input required type="text" class="form-control" name="lastname" value="">
</div>
</div>
<div id="error">
<div class="alert alert-danger"> <strong>Error!</strong> There Are Too Many Errors</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="submitForm">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal" id="reset">Cancel /Clear</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="thanks"></div>

Ajax pour soumettre le formulaire

 $("#submitForm").click(function () {
$.ajax({
type: "POST",
url: "process.php",
data: $('#myform').serialize(),
success: function (msg) {
$("#thanks").html(msg)
$("#myModal").modal('hide');
},
error: function () {
$("#error").show();
}
});
});

En supposant que le langage côté serveur PHP

<?php
if (isset($_POST['firstname'])) {
$firstname = strip_tags($_POST['firstname']);
$lastname = strip_tags($_POST['lastname']);
//Do what ever you like to do next
echo "<div class=\"alert alert-success\"><strong>Success!</strong> This Is Success Thanks Message. If everything go exactly as Planned.</div>";
}
?>

Jusqu'ici, les valeurs d'un Formulaire a été posté.

2. Si le soumis avec succès, l'alerte-message de réussite s'affiche.

 success: function (msg) {
$("#thanks").html(msg)
},

Après le succès de l'appel de l'Ajax, le message de réussite apparaît;

 <div id="thanks"></div>

C'est à vous Si vous wana mettre <div id="thanks"></div> à l'intérieur modal corps, mais je ne le recommande pas, car l'étape suivante vous demander, c'est de l'auto de fermer la modale succès de message affichera seulement pour quelques secondes, et modal se ferme.

3. Si l'alerte-la réussite affiche, j'aimerais avoir la fenêtre modale près

Après le succès de l'appel de l'Ajax cette auto fermer la modale

 success: function (msg) {
$("#thanks").html(msg)
$("#myModal").modal('hide');
},

4. (en option) j'aimerais réinitialiser le formulaire

Après le Succès de l'appel Ajax, une Fois que le modal a été fermé, d'après le code de réinitialiser les entrées d'un formulaire si modale de l'ouvrir à nouveau.

$('#myModal').on('hidden.bs.modal', function(){
//$(this).removeData('bs.modal');
$(':input','#myform').val("");
});

Éventuellement Si l'utilisateur de placer les valeurs dans la forme et fermer la modale sans le poster, d'après le code pouvez également réinitialiser le formulaire si l'utilisateur a ouvert la modale de nouveau, cancel/clear bouton a id reset qui est lié avec le code suivant.

    $("#reset").click(function () {
$(':input','#myform').val("");
});

La dernière chose, assurez-vous que le complet code JS sera DOM prêt

$(document).ready(function () {
//Put JS code here
});

Violon Exemple

Dans votre tentative;

$(document).ready(function(){
if($('#alert-success')){
$('#myModal').hide(); <<<<----This is wrong
} 
});

Lors de la fermeture de modal avec jQuery (pas avec bootstrap) devrait être comme

$('#myModal').hide('hide'); <<<<----Correct