$('#popup').modal('hide');
I am trying use this code to close my modal, but it doesn't close.
I wrote this in my ts import * as bootstrap from "bootstrap";.
My Imports in html
What can I do to get it working?
You should look at the documentation again to read the right implementation. Also, it looks like you are using Bootstrap 5. You are writing the hide() for older bootstrap versions.
Related
I just learned to create a website using bootstrap. I created a project using bootstrap for the appearance of the website. Initially, I used an online bootstrap to make the website display work optimally. I made a navbar with the hamburger menu, and when I clicked it the result was like this:
There is a smooth animation when I click the hamburger menu.
Then I tested the appearance of my website using offline bootstrap, and the results were like this:
There is no animation when I click the hamburger menu.
When I try to use the jquery slideToggle() script in html (I put it in html just for testing), the animation will appear like I am using an online bootstrap.
<script>
$(document).ready(function () {
$("#hamburgerMenu").click(function () {
$("#navbarTogglerDemo02").slideToggle();
});
});
</script>
Question: do I really have to implement the jquery slideToggle() script above into my javascript file or is there another way so I don't have to put the script? Because in online bootstrap I don't need to write the above script in my javascript file.
There's no reason that I can think of that the offline bootstrap should behave any differently than the online one.
I'd be curious on where did you source the two files and i'd do a comparison between the two. If it's working online, all you're doing is getting that code and minifying it for local use like so:
<link rel="stylesheet" href="css/bootstrap.min.css">
Solved! The question has been answered, although I can't solve the error.
It turns out that the online bootstrap version that I am using is version 4.0.0 (I adjusted jquery and popper.js according to the documentation) and the offline version is 4.5.2. When I tried to use online bootstrap version 4.5.2 (with jquery and popper.js which have also been adjusted), the animation also didn't work. Once I tried bootstrap version 4.0.0 offline, the animation ran normally.
I'm not sure with this answer. There may be a bug in the bootstrap. But when I tried various methods, the result was same
Result:
Bootstrap 4.0.0: animation in toggle both offline and online goes as desired (there is a smooth animation)
Bootstrap 4.5.2: animation in toggle both offline and online does not work as desired (no animation)
I have a Laravel project, and I don't want to use bootstrap in it. can I import and use the popper.js plugin without using bootstrap?
When I try to do this, It just shows me the popover title.
It might be two possibilities.
1) Css wasn't affected.
2) Some javascript error.
I am sending a documentation link. Still, you are facing an error. Please send me code snippet.
Popper document link
Iam trying to create a accordion from the bootstrap website in React. Iam following this website https://getbootstrap.com/docs/4.1/components/collapse/#accordion-example
I copied their example code and it looks exactly just as the example on the website but the problem is when I click on the accordion nothing happends, it doesn't expand or close. Is there suppose to be a onClick function somewhere in the code that needs to be included?
you need to copy the JS as well as the css code from bootstrap lib.
i suggest to use code from my google search bellow, create a component and just adapt the css style to bootstrap
https://www.google.it/search?q=accordion+example+jsfiddle&oq=accordion+example+jsf&aqs=chrome.1.69i57j0l5.12453j0j1&sourceid=chrome&ie=UTF-8
actually is very easy to build it
Forgive me if I'm totally wrong here, as I am fairly new to web development- but I've used that accordion before and simply copying and pasting their code should do the trick, provided you have added the proper link tags from their "Getting Started" section in documentation set in your index.html (not just CSS but all of the JS links, too).
I hope this helps!!
I'm playing a bit with Parties and the thing is I can't get "create party" and "invite" modals to work on bootstrap-3.
The mask (light gray background that hover the page) get launched but no modals appears.
I used: mrt add bootstrap-3 to add bootstrap (and deleted the default bootstrap version)
You may want to also check out the https://github.com/TimHeckel/meteor-bootboxjs package which (as of now) uses Bootbox 4.2.0 with Bootstrap 3.
It's not Meteor-esque, but it is a nice package for displaying modals that is extensively tested, and you can also insert reactive content into it (if not using the default alert, confirm, or prompt) by using a bit of a hack:
var fooDialog = bootbox.dialog(message: " ").html('');
UI.insert(UI.render(Template.bar), fooDialog[0]);
Just got it, I added show class to the div and it works
<div class="modal show">
I'm trying to implement bootstrap tooltips on my site - you'd think it would be easy enough, but something is not working correctly - the bootstrap tooltip is not functioning.
I'm calling all the right scripts, stylesheets and javascript - I believe. I'm following the example here: http://jsfiddle.net/TSZSL/171/ and I believe this javascript could be throwing me?
$('.example').tooltip();
Here's the page I'm referring to. I just get a regular tooltip with no bootstrap functionality.
The problem is your reference to boostrap's tooltip library. You can't link to it like that; it's not a CDN...
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>.
Use netdna's complete JS package or host the individual script yourself. See BootstrapCDN.
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>