Actually I am trying to get this code to run under bootstrap 5.0.0 alpha, with tthe example given in the bootstrap 5 documentation. As it didn't work I tried it with the current bootstrap 4 version, and one of the examples in the bootstrap 4 documentation. Both times I am hitting the same error message:
Uncaught TypeError: myModal.show is not a function at window.onload (cookieModal.php:180)
I put the example from the boostrap 4 site in a basic bootstrap code and added the script with the window.onload function to trigger the modal after the site has been loaded:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Bootstrap 4 Starter Template</title>
</head>
<body>
<h1>Hello</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
window.onload = function(){
var myModal = document.getElementById('exampleModal');
myModal.show();
}
</script>
</body>
</html>
The error is the same in Bootstrap 5 alpha as in Bootstrap 4. In both cases when you press the button at least the modal appears.
As boosttrap 5 has abandonned jQuery I am not interested in a jQuery solution. I would prefer to launch the modal with window.onload.
I had inserted an alert after the var myModal declaration and it shows that myModal is a DIV element. So at least myModal seems to find the id for exampleModal.
Thank you in advance
Gunther
After another week of googling I found the answer in Bootstrap V5 manually call a modal myModal.show() not working (vanilla javascript)
window.onload = function(){
var myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
myModal.show();
}
works !!!
Related
I have a problem with Flatpickr rendering in a Bootstrap modal.
When I open a Flatpickr entry within a modal, everything seems to work fine except for entering a year. When I want to click on the year, the input field does not work.
Thanks for help.
Flatpickr version 4.6.9 and Bootstrap version 5.1.1
In order to use the month and year picker you need to use the Flatpickr option static: true. This way it will not hide behind the modal.
$(document).ready(function() {
const flatpickr_time = $('#flatpickr_time').flatpickr({
//static: position the calendar inside the wrapper and next to the input element*.
static: true
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script>
<div class="container">
<div class="row justify-content-center">
<div class="col-4 m-5">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch modal</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input id="flatpickr_time" style="width:200px;">
</div>
</div>
</div>
</div>
I've had the same issue and while the solution proposed by Crezzur did work, it had some side effects that I didn't want.
I was able to find that the issue was caused by bootstrap being a bit too aggressive with the focus, which means it can be fixed simply by adding bs-focus="false" to your modal.
Example:
<div class="modal" role="dialog" data-bs-focus="false">
This question already has an answer here:
Modal Form not showing up [duplicate]
(1 answer)
Closed 1 year ago.
I'm trying to learn how to use the bootstrap model. I tried to follow the documentation and some youtube videos and this is what I have:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<button type="button" class="form-text term" data-toggle="modal" data-target="#termsModal">Open Modal</button>
<div class="modal fade" id="termsModal" tabindex="-1" role="dialog" aria-labelledby="termsModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="termsModalLabel">Terms of Use</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Okay</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
But when I click the Open Modal button, nothing happens. What am I missing?
As explained in the Bootstrap 5 migration docs, the data- attributes have changed to data-bs- in Bootstrap 5.
"Data attributes for all JavaScript plugins are now namespaced to help
distinguish Bootstrap functionality from third parties and your own
code. For example, we use data-bs-toggle instead of data-toggle."
Bootstrap modal not showing. i have included all necessary files.
i have tried moving the JS files to before the as well as before but none is working. i tried my code on jsfiddle but could not work too
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
open
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>
</html>
The Bootstrap 5 data attributes now use the bs namespace, so to trigger the modal it would be...
open
Also jQuery is not necessary.
Demo
Note: The data-bs- markup is required for all Bootstrap 5 javascript components such as Navbar, Dropdown, Collapse, etc...
I am using Zurb Foundation 6 framework and I want to use the reveal modal. For some reason there is no response when clicking the button to open the modal.
My JsFiddle
https://jsfiddle.net/zzf2suto/1/
Your jquery script url is wrong, also close button in reveal has different syntax
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css">
</head>
<body>
Click Me For A Modal
<div id="myModal" class="reveal" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/vendor/what-input.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>
Correct reveal modal syntax
Please anyone can help me, How can animate css styles can be use to animate while bootstrap modal opens and closes?
As Modal Opens it should be open with fadeIn effect and while closing it should with fadeOut effect.
I wanted to use animate.css css stylesheet for animate modal poup open and close.
It should add class fadeIn while opening Model and while closing the modal it should be adding class fadeOut. ( Class .fadeIn & .fadeOut are from aniamte.css stylesheet)
$('.modal').on('show.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog fadeIn animated');
})
$('.modal').on('hide.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog fadeOut animated');
})
This is I wanted.
Add fade to class attribute of your modal markup:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal with animation</h4>
</div>
<div class="modal-body">
Close modal to see <i>fade-out</i> effect.
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal with <i>fade-in</i> effect
</button>
Remove the .fade class from your modal markup to simply appear one. See Remove animation section for details.
$('#modelDivId').on('show.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog flipInX animated');
})
$('#modelDivId').on('hide.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog flipOutX animated');
})