Bootstrap $('#myModal').modal('show') ne fonctionne pas

Je ne sais pas pourquoi mais toutes les fonctions modales ne fonctionnent pas avec moi. J'ai vérifié la version et la charge.

je reçois ce message d'erreur:

Uncaught TypeError: $(...).modal is not a function

pour la peau j'ai déjà trouvé une alternative. au lieu de:

$('#myModal').modal('hide');

j'ai utilisé ceci :

$('#myModal .close').click();

et ça marche parfaitement.

Le problème maintenant est avec le spectacle

$('#myModal').modal("show");

j'ai aussi essayé les deux

$('#myModal').modal("toggle");

Et:

$('#myModal').modal();

mais malheureusement, aucun d'entre eux travaille.

voici le code html-quand le bouton est cliqué je vais faire un peu de vérification et manipuler des données json du service web si elle réussit alors je veux montrer mon modal - tout fonctionne sauf le spectacle. 

 <button type="button" id="creatNewAcount" class="btn btn-default" data-toggle="modal">Sign up</button>

s'il y a une alternative, j'aimerais la connaître.

10
demandé sur Nysa 2016-04-17 06:18:05

9 réponses

la raison la plus fréquente de ces problèmes est

1.Si vous avez défini la bibliothèque jquery plus d'une fois.

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <div class="modal fade" id="myModal" aria-hidden="true">
    ...
    ...
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

la bibliothèque bootstrap est appliquée à la première bibliothèque jquery mais lorsque vous rechargez la bibliothèque jquery, la charge originale bootstrap est perdue(la fonction modale est dans bootstrap).

2.Veuillez emballer votre code JavaScript à l'intérieur de

$(document).ready(function(){});

3.S'il Vous Plaît vérifier si l'id du modal est même

que celui que vous avez défini pour le composant(vérifiez Également la duplication de la même id ).

21
répondu Prakash Thete 2017-06-27 04:47:56

j'ai eu le même problème en travaillant avec Modal Popup Bootstrap , j'ai utilisé Id et trigger click event pour afficher et cacher modal popup au lieu de $("#Id").modal ('show') et $("#id").modal ("cacher"), ` 

    <button type="button" id="btnPurchaseClose" class="close" data dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span></button>
<a class="btn btn-default" id="btnOpenPurchasePopup" data-toggle="modal" data target="#newPurchasePopup">Select</a>
    $('#btnPurchaseClose').trigger('click');// for close popup

     $('#btnOpenPurchase').trigger('click');`// for open popup
2
répondu Muhammad Bilal 2017-12-24 09:58:38

Ma cause est que j'ai oublié d'ajouter le # avant le nom d'identification. Boiteux mais vrai.

$('scheduleModal').modal('show');


$('#scheduleModal').modal('show');

Pour votre information, la séquence de code qui fonctionne pour moi est

<script>
function scheduleRequest() {
        $('#scheduleModal').modal('show');
    }
</script>
<script src="<c:url value="/resources/bootstrap/js/bootstrap.min.js"/>">
</script>
<script
    src="<c:url value="/resources/plugins/fastclick/fastclick.min.js"/>">
</script>
<script
    src="<c:url value="/resources/plugins/slimScroll/jquery.slimscroll.min.js"/>">
</script>
<script
    src="<c:url value="/resources/plugins/datatables/jquery.dataTables.min.js"/>">  
</script>
<script
    src="<c:url value="/resources/plugins/datatables/dataTables.bootstrap.min.js"/>">
</script>
<script src="<c:url value="/resources/dist/js/demo.js"/>">
</script>
1
répondu Siddharth 2018-03-08 09:57:34

Essayez Ceci sans paramater

$('#myModal').modal();

il doit être travaillé

0
répondu Ahmed Hany 2016-04-17 03:32:49

Etes-vous sûr que l'id du modal est "myModal"? si non, alors l'appel ne sera pas la déclencher.

aussi-juste à partir de la lecture de votre post - vous déclenchez une fonction / validation avec ce bouton 

<button type="button" id="creatNewAcount" class="btn btn-default" data-toggle="modal">Sign up</button>

et puis si tout est bien vous souhaitez déclencher le modal. - si c'est le cas, vous devez supprimer la bascule de cette clic de bouton. Je suppose que vous avez un gestionnaire d'événements liés à cette clique? vous avez besoin de la .modal("afficher") comme une partie de cette fonction. pas basculé à partir de ce bouton. aussi - est-ce que cet id est correct "creatNewAcount" par opposition à cette orthographe "createNewAccount"

<button type="button" id="creatNewAcount" class="btn btn-default" >Sign up</button>
0
répondu gavgrif 2016-04-17 04:02:22

utilisez l'objet pour appeler...

<a href="#" onclick='$("#myModal").modal("show");'>Try This</a>

ou si vous utilisez ajax pour montrer que modal après obtenir le résultat, c'est du travail pour moi...

$.ajax({ url: "YourUrl",
type: "POST", data: "x=1&y=2&z=3",
cache: false, success: function(result){
        // Your Function here
        $("#myModal").modal("show");
    }
});
0
répondu Rhega 2016-04-17 04:29:08 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>

le premier script googleapis ne fonctionne plus depuis quelques jours utilisez ce second script donné par jquery

0
répondu kumar 2016-10-27 05:52:57

jQuery lib doit être chargé en premier. Dans mon cas, je chargeais bootstrap lib en premier, j'ai aussi essayé tag with target et tirer un click trigger. Mais le principal problème était que jquery devait être chargé en premier.

0
répondu Sajal 2017-05-18 12:33:54

Utiliser .modal({show:true}) et .modal({show:false}) au lieu de ('show') et ('hide') ... il semble être bootstrap / jquery version combinaison dépendante. Espérons que cela aide.

0
répondu Paul Vermeer 2018-05-03 04:06:36