Ik heb een modal in mijn pagina. Wanneer ik het probeer op te roepen wanneer de vensters laden, drukt het een fout af in de console die zegt :
$(...).modal is not a function
Dit is mijn Modal HTML :
<div class="modal fade" id="prizePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
This Modal title
</h4>
</div>
<div class="modal-body">
Add some text here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">
Submit changes
</button>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
En dit is mijn JavaScript om het uit te voeren wanneer een venster wordt geladen :
<script type="text/javascript">
$(window).load(function() {
$('#prizePopup').modal('show');
});
</script>
Hoe kan ik dit probleem oplossen?
Je hebt een probleem met de volgorde van de scripts. Laad ze in deze volgorde:
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
$('#prizePopup').modal('show');
});
</script>
Waarom dit? Omdat Bootstrap JS afhankelijk is van jQuery:
Plugin afhankelijkheden
Sommige plugins en CSS componenten zijn afhankelijk van andere plugins. Als je plugins individueel opneemt, zorg er dan voor dat je deze afhankelijkheden controleert in de docs. Bedenk ook dat alle plugins afhankelijk zijn van jQuery (dit betekent dat jQuery moet worden opgenomen voordat de plugin-bestanden).
de volgorde van het script veranderen
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script>Omdat bootstrap is een jquery plugin dus het vereist Jquery uit te voeren