Twitter Bootstrap 2 boîtes de dialogue de formulaire modal
-
27-10-2019 - |
Question
J'ai la forme de dialogue suivante:
<div class='modal' id='myModal'>
<div class='modal-header'>
<a class='close' data-dismiss='modal'>×</a>
<h3>Add Tags</h3>
</div>
<div class='modal-body'>
<form accept-charset="UTF-8" action="/tagging" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" /></div>
<input id="tags_string" name="tags_string" type="text" value="luca" />
<input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
</form>
</div>
<div class='modal-footer'>
<div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div>
</div>
</div>
et ses JS:
<script>
//<![CDATA[
$(function() {
// wire up the buttons to dismiss the modal when shown
$("#myModal").bind("show", function() {
$("#myModal a.btn").click(function(e) {
// do something based on which button was clicked
// we just log the contents of the link element for demo purposes
console.log("button pressed: "+$(this).html());
// hide the dialog box
$("#myModal").modal('hide');
});
});
// remove the event listeners when the dialog is hidden
$("#myModal").bind("hide", function() {
// remove event listeners on the buttons
$("#myModal a.btn").unbind();
});
// finally, wire up the actual modal functionality and show the dialog
$("#myModal").modal({
"backdrop" : "static",
"keyboard" : true,
"show" : true // this parameter ensures the modal is shown immediately
});
});
//]]>
</script>
Lorsque je clique sur x, qui est <a class='close' data-dismiss='modal'>×</a>
, la forme étroite vers le bas me laissant sur la page en cours, alors que je voudrais aller sur le hamepage.
En outre « Ajouter tag » Botton, qui est <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div>
ne rien faire, en cliquant jaust ENTRER sur le clavier faire le travail et je voudrais en cliquant sur « Ajouter tag » a fait la même.
Je ne suis pas si habile JS et prog front-end, de sorte que toute aide est la bienvenue.
La solution
Votre bouton Envoyer est en dehors des balises de formulaire.
Il ne saura pas ce formulaire pour soumettre.
utiliser JavaScript pour le connecter à la forme.
<div class='modal-body'>
<form id="modal-form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
<input name="something" value="Some value" />
</form>
</div>
<div class='modal-footer'>
<a id="modal-form-submit" class='btn btn-primary' href="#">Submit</a>
</div>
<script>
$('#modal-form-submit').on('click', function(e){
// We don't want this to act as a link so cancel the link action
e.preventDefault();
// Find form and submit it
$('#modal-form').submit();
});
</script>
En ce qui concerne la <a class='close' data-dismiss='modal'>×</a>
qui est censé lien vers la page d'accueil, pourquoi ne pas simplement supprimer le data-dismiss='modal'
et le faire agir comme un lien normal à l'aide d'un href='home.html'
standard.
Voici un code supplémentaire pour vous orienter dans la bonne direction pour l'utilisation de AJAX pour soumettre le formulaire:
// Since we want both pressing 'Enter' and clicking the button to work
// We'll subscribe to the submit event, which is triggered by both
$('#modal-form').on('submit', function(){
//Serialize the form and post it to the server
$.post("/yourReceivingPage", $(this).serialize(), function(){
// When this executes, we know the form was submitted
// To give some time for the animation,
// let's add a delay of 200 ms before the redirect
var delay = 200;
setTimeout(function(){
window.location.href = 'successUrl.html';
}, delay);
// Hide the modal
$("#my-modal").modal('hide');
});
// Stop the normal form submission
return false;
});
Autres conseils
Pour obtenir le bouton Soumettre travail mis à l'intérieur de la forme.
<div class="modal">
<form id="modal-form" action="/tagging" data-remote="true" method="post">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>A Modal Form</h3>
</div>
<div class="modal-body">
<input name="something" value="Some value" />
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Cancel</a>
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>
</div>
Cependant, cela ajoute une marge inattendue au fond du modal. Bootstrap 2.0.2 introduit classe modal-form
pour résoudre ce problème ou vous pouvez fixer vous-même avec une définition de style comme:
.modal > form {
margin-bottom: 0;
}
un lien vers une autre page lors de la fermeture du modal je vais avec TheShellfishMeme
En ce qui concerne la × qui est censé lien vers la page d'accueil, pourquoi ne pas simplement supprimer les données = rejeter « modal » et la faire agir comme un lien normal en utilisant un standard href = « home.html ».
Avec HTML5, vous pouvez avoir quelque chose comme ceci:
<div class="modal" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add Tags</h3>
</div>
<div class="modal-body">
<form id="my_form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" />
</div>
<input id="tags_string" name="tags_string" type="text" value="luca" />
<input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
</form>
</div>
<div class="modal-footer">
<div class="btn btn-primary"><input name="commit" type="submit" value="Add tag" form="my_form" /></div>
</div>
</div>
appelé HTML5 élément associé forme de plats si vous avez besoin pour soutenir tous les navigateurs + anciens, alors vous devez aller avec JavaScript, mais vous pouvez utiliser JavaScript comme solution de repli :)
Le problème pour soumettre des mensonges de formulaire dans bootstrap propres JS bibliothèque modale (bootstrap-modal.js) - soumettre basicaly événement est empêché en raison de la ligne # 204: ev.preventDefault
(pourquoi?)
Ma solution a été d'ajouter:
if(!$(e.target).parents('form'))
e.preventDefault();
mais je ne sais pas quels problèmes il va produire.
Pour votre information, vous pouvez effectuer les opérations suivantes (écrit en jade):
.modal.hide.fadel
form.modal-form
.modal-header
button.close type='button' data-dismiss="modal" x
h3= t 'translation'
.modal-body
p hello
.modal-footer
button.btn data-dismiss="modal" href="#" = t 'close'
a.btn.btn-primary data-dismiss="modal" data-remote="true" href="#"= t 'form.submit'