Alright, so I've got this js code:
jQuery(".toggle-panel").click(function() {
jQuery('#collapsible-element').collapse({
toggle: true,
});
});
I assume it should open and close #collapsible-element but it can only close it. This #collapsible-element has also classes "collapse in" attached by myself in code. With first click on .toggle-panel it closes the #collapsible-element, but the second click does not open it again. Am I missing something?
You don't need any additional JavaScript code for toggle if you are using bootstrap. check out the following:
http://getbootstrap.com/javascript/#collapse
Related
How do I close bootstap modal programmatically? I checked so many answers about it, but none of them work... All below methods close modal, but keeps backdrop of it so I tried to remove backdrop with $('.modal-backdrop').remove(); it breaks modal and if I show it after removing backdrop scroll doesn't work on modal. I need to close it through js and whenever I want to by calling method. I know I can use data-dismiss="modal" to close it.
how I'm hiding modal:
$('#mymodal').modal("toggle");
$('#mymodal').modal("hide");
$('.close').click();
Update
So I see that for a lot of people it works with $('#mymodal').modal("hide"); but when I Inspect page I can see that there is two modal-backdrops in the body and after I call hide it closes modal and first modal-backdrop, but second one stays and this is why it's not working.
with modal open:
After closing modal with $('#mymodal').modal("hide");
This should work. if not you have other problem in code. Read modal javascript docs https://getbootstrap.com/docs/4.0/components/modal/#via-javascript
$('#myModal').modal('hide')
How exactly do I open one modal from another modal in meteor? I'm using bootstrap-3-modal package
When I try clicking on the confirm button of one modal, it must close that modal and open a new modal. Somehow,it doesn't seem to work. Here's what I have:
Template.addMoreTemplateConfirmationModal.events({
'click #confirmMorePGInstance'(event){ // this is the confirm button on addMoreTemplateConfirmationModal modal
Modal.show('createTemplateModal'); // this does not work.
// Modal.hide('addMoreTemplateConfirmationModal');
},
Have you tried closing the modal before showing the next one?
Otherwise you could maybe trigger the second modal on the onDestroyed event, although there might be a better way.
Template.addMoreTemplateConfirmationModal.onDestroyed(function() {
Modal.show('createTemplateModal');
});
Simply use setTimeout which runs only once after given miliseconds (300 is the miliseconds in the example below).
'click #confirmMorePGInstance': function(){
// close modal here
Meteor.setTimeout(function () {
//open the next modal here
}, 300);
},
PS: I suggest using 50-100 miliseconds more than the closing effect speed.
I want to show a bootstrap modal immediately after user close another. So I use the following code trying to do this:
currentModal.modal('hide').on('hidden.bs.modal', function (){
nextModal.modal('show');
});
Everything happens normally. First modal closes and next modal appears.
However, the class="modal-open" should be in body element to scroll works properly, what is not happening. After second modal is shown, that class disappears from body.
Am I doing something wrong?
Am I doing something wrong?
I don't think so. The large number of issues on this topic suggests that this was either not well-designed, or not designed to support this. Relevant bugs would be
Multiple modals fix #5022, Multiple modals #11872 and
.modal-open is not applied to body when "switching" to another modal #11865 where it is explicitly said by #mdo:
Yup, we won't be supporting multiple modals.
So what to do about it?
A small timeout should definitely help:
currentModal.modal('hide').on('hidden.bs.modal', function (){
setTimeout(function() {
nextModal.modal('show');
}, 100);
});
Without seeing this in action, my guess is that there is some kind of callback handler that removes the class "modal-open". You can try manually adding it like this:
currentModal.modal('hide').on('hidden.bs.modal', function (){
nextModal.modal('show');
body.addClass('modal-open');
});
But instead of overriding Bootstrap, have you looked into data-dismiss and data-target?
I've got a weird problem. I'm using Twitter Bootstrap 3, JQuery plus JQuery Validate and Hash to build an accordion menu. In my code I have the following line to collapse a panel:
$("#collapseThree").collapse('hide')
However the panel is being shown not collapsed. Here's my fiddle:
http://jsfiddle.net/H7kJ3/
To replicate the issue enter a title and email address then press the "Next" button. The second panel ('Step 2') is correctly opened however panel three ('Step 3') is also opened for some unexplained reason.
You need to switch off toggling.
$("#collapseOne").collapse({ toggle: false })
$("#collapseTwo").collapse({ toggle: false })
$("#collapseThree").collapse({ toggle: false })
A fork of your code is here
I'm having problems getting the SimpleModal jQuery plugin to close when the body is clicked. So far, only the 'X' button works to close it with:
$('a.modalCloseImg').hide();
Here is my code for launching the modalbox. Note that #login-link is the link that opens the box and #login-form is the hidden modal box.
// launch modal box
$("#login-link").click(function(){
$("#login-form").modal();
});
I've tried adding
$("#login-form").modal(overlayClose:true);
but it doesn't seem to be working. (FYI that parameter is per the documentation of the SimpleModal box as seen here.
Try launching the modal box with an additional parameter, like this:
// launch modal box
$("#login-link").click(function(){
$("#login-form").modal({ overlayClose: true });
});
you forgot additional {}.