I am in the creation of a modal window which I require to be displayed as soon as I log in but I am presenting an error in the browser console and it is the following:
Uncaught TypeError: $(...) is not a function
at HTMLDocument.<anonymous> ((index):25)
at l (jquery.min.js:2)
at c (jquery.min.js:2)
I have prepared the following snippet with the code I currently have to display my modal window:
<!doctype html>
<html lang="es">
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="activos/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="activos/css/estilos.css" type="text/css">
<link rel="icon" type="image/png" href="activos/img/icon.png" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
(function($){
$('#basicModal')({ show: false});
$('#basicModal').modal('toggle');
});
</script>
</head>
<body>
<div class="cuerpo">
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">Basic Modal</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div id="content-area">
</div>
</div>
</body>
</html>I don't know if it's a JQuery or Bootstrap version problem that shows me this error in the browser console and doesn't open the modal window either.
Update 1:
I used the usual way
(function($){
$('#basicModal')({ show: false});
$('#basicModal').show();
});
Now it doesn't show me errors in the browser console anymore but it still doesn't show me the modal window, any other suggestions?
Update 2:
Another of the suggestions that they make me in the comments is to use $('#basicModal').modal('toggle');it, since sometimes it doesn't work show();, I have used it in the following way but I still don't get a result, any other suggestion?
(function($){
$('#basicModal')({ show: false});
$('#basicModal').modal('toggle');
});
I have changed the version of jQuery for the one I use and the version of Bootstrap for the one I use, in addition to adding
$(document).ready(function ()so that it loads when opening the DOM.What I would do is that if it is for when they log in, save a cookie to show it only once they log in, if it already exists, do not show it, and if it does not exist, yes, but that depends on what you are looking for.
I don't know if you have problems with changing jQuery or Bootstrap, but I suggest this.