web-dev-qa-db-fra.com

bootstrap modal disparaît immédiatement après avoir montré

J'utilise le plugin modal de bootstrap dans Rails

Le site Web indique que je peux obtenir la fonction sans écrire de code javascript.

J'ajoute la ligne suivante dans monHTML(en slim):

div#makeDream.modal.hide.fade 
    div.modal-header
        a.close data-dismiss='modal'
        h3 Hello World!            
    div.modal-body
    div.modal-footer

a data-toggle='modal' data-target='#makeDream' Button

Cependant, après avoir cliqué sur Button. le modal apparaît, mais disparaît immédiatement!

J'ai trouvé le css de #makeDream a

display:none

Je ne sais pas où ça vient

Quelqu'un peut-il me dire comment résoudre ce problème?

jqueryruby-on-railscsstwitter-bootstrap
26
HanXu

J'ai eu ce problème et la solution était simple ... Je chargeais les deux bootstrap.js AND bootstrap-modal.js .

bootstrap.js includes bootstrap-modal.js . 

Solution: Supprimez bootstrap-modal.js de votre head et tout fonctionnera correctement.

68
Adam

Dans mon cas, le problème de l'affichage et de la disparition immédiate de la fenêtre modale était le fait que j'ai appelé basculer deux fois. Tout d’abord, dans balise dans un fichier HTML, puis lors de l’attachement du gestionnaire d’événements dans un fichier JavaScript, comme suit:

<a role="menuitem" tabindex="-1" href="#" data-toggle="modal" data-target="#myModal" id="deleteItemButton">Delete Item</a>

$ultodoListDisplay.on( "click", "#deleteItemButton",  function(){
    $('#myModal').modal('toggle');
});

Les références au CDN et aux feuilles de style Bootstrap étaient correctes . Par conséquent, définissez le basculement de la fenêtre modale une seule fois.

4
user3941146

Si quelqu'un utilise Twitter bootstrap modal sur un site mobile, il y a de grandes chances que vous utilisiez jquerymobile. Si tel est le cas, vous rencontrerez probablement ce problème particulier de suppression modale du bootstrap sur vous. J'ai trouvé que le problème venait d'une classe '.fadein' de jquerymobile qui surchargeait la classe '.fadein' depuis Bootstrap, ce qui masquait la fenêtre modale.

Vous pouvez choisir de résoudre ce problème à votre manière. Mon approche, puisque je n’utilisais pas vraiment le fade in de jquery mobile, j’ai commenté et voila! le dialogue modal était de retour. J'espère que ça aide quelqu'un. :)

3
Nishant

J'ai eu ce problème parce que j'avais deux références de "bootstrap.min.js", un lien de CDN et un autre fichier local, faire des commentaires à l'un d'eux a fait en sorte que certains menus déroulants ne répondent pas

alors je viens de mettre à jour le "jQuery Validate Unobtrusive for Bootstrap 3", il a résolu mon problème.

1
WasiF

vous devriez ajouter bootstrap-model.js au bas de la page, eu également un problème, j’essayais avec un autre plugin, nous pouvons aussi utiliser un autre plugin, mais avant de l’utiliser, pensez à bootstrap-model.js ... ..

1
saggy

Essayez de supprimer la classe "hide" dans cette ligne:

div#makeDream.modal.hide.fade

A lire comme ceci:

div#makeDream.modal.fade

Notez également que, selon la version de Bootstrap que vous utilisez, le bouton pour ouvrir le modal peut avoir besoin d'être écrit ainsi (traduire en html slim):

<a class="btn" data-toggle="modal" data-backdrop="true" data-keyboard="true" href="#makeDream">Open Modal</a>
1
Zheileman

J'ai eu le même problème, j'ai été inclus à la fois bootstrap.js et bootstrap.min.js, puis j'ai supprimé l'un d'eux et il a résolu le problème

0
Zero

Dans mon cas, j'avais un bouton qui appelait le modal ...

<asp:Button ID="btnSearch" runat="server" Width="100%" Text="Select
Action" class="btn btn-info btn-sm" data-backdrop="static"
data-toggle="modal" data-target="#myModalID"></asp:Button>

J'ai changé le bouton pour une balise d'ancrage et cela fonctionne très bien 

<a href="#" ID="btnShowModal" class="btn btn-info btn-sm"
data-backdrop="static" data-toggle="modal" style="width:100%;"
data-target="#myModalID">Select Action</a>

C'était après avoir vérifié que je ne chargeais pas les fichiers javascript en double bootstrap. Bootstrap.min.js ou boostrap.js. Un seul suffit.

0
Lovemore Daka

Dans mon cas, j'utilisais le plugin wordpress "wp-jubhunt" et le thème "_tk" et les deux chargeaient le fichier bootstrap.js. 

0
Shahid Chaudhary

Dans mon cas, les modaux fonctionnaient bien avec les attributs, mais lorsqu'ils s'appelaient .modal ('show') de js, ils se cachaient immédiatement. Le problème a été résolu lorsque j'ai mis bootstrap.js dans le pied de page, mais je ne sais pas pourquoi cela ne fonctionnait pas dans l'en-tête après toutes les déclarations css et jquery.

0
user3872496

bootstrap.min.js est la cause de ce problème, le supprimer en résolvant le problème,

jQuery(document).on('click','#SendMail',function(){ 
 jQuery("#fixerrormodal").modal('toggle');   
});

cela aidera 

0
ProgrammerCk

Les autres solutions ici ne m'ont pas aidé. J'ai trouvé que j'avais utilisé modal dans une forme de lame en laravel, raison pour laquelle l'action de formulaire envoie une demande de boucle et mon modèle disparaît. Je coupe simplement le bouton en dehors de la forme div et tout fonctionne bien.

0
Adil Bashir

Vous pouvez simplement supprimer les attributs data-toggle="modal" et data-target="#myModalID" du bouton ou de la balise d'ancrage. Ceci bascule le modal et vous avez importé bootstrap.min.js deux fois ou plus, ce qui bascule!

A la place, écrivez un écouteur d'événement onClick pour le bouton et déclenchez manuellement le modal: $('#myModal').modal();

0
Simran Sawhney

J'ai eu le même problème, au chargement de la page, basé sur la variable de session, je montrais le modal, et il a disparu, quand j'ai utilisé $ ('# myModal'). Modal ('show'), mon problème a été résolu en utilisant la méthode jquery Trigger, sur le lien de connexion que j'ai utilisé

$(window).load(function(){ $('#loginlink').trigger('click'); });

0
JosephC