Develop Reference

close bootstrap modal popup on confirmation using Jquery

I have bootstrap modal popup, in footer of modal popup there is one button
<button type="button" class="btn btn-primary submit">Submit</button>
when i click this button a confirmation is opened
$(".submit").on("click",function(event){
event.preventDefault();
if(confirm('Please confirm?')) {
$(".submit").removeClass('submit');
$(this).addClass('close_popup');
} else {
}
});
$(document).on('click','.close_popup',function(){
$('#default_modal').modal('hide');
});
i want if i click on submit button for the first time submit class should get removed and close_popup class should be added and on clicking for second time on close_popup class the modal should get closed. In my case confirmation popup is open and if i click on ok the modal is also getting closed.
Any Solution to fix this issue Thanks

Toggle Bootstrap dropdown by click on the link in modal

When a form submitted the modal box appears. This box contains a text with a link. Click on this link should close this box and toggle dropdown (auth form). The problem is that I can't handle toggling the dropdown by clicking this link.
Here is the code of click-handler of this link
$(function() {
$('#open_auth_form').click(function(e) {
e.preventDefault();
$('#participate_modal').modal('hide');
$('#auth_link').dropdown('toggle');
});
});
Why doesn't it work? I tried also to move dropdown toggling inside the 'hide.bs.modal', tried .trigger('click'). Nothing helped. But simple running
$('#auth_link').dropdown('toggle');
from console works well.

Check out this stack overflow question on How to open Bootstrap dropdown programmatically. There are a number of solutions you can try such as:
Triggering the click.bs.dropdown event:
$('#dropdown').trigger('click.bs.dropdown');
Or manually adding/removing the classes:
$('.dropdown').addClass('open'); // Opens the dropdown
$('.dropdown').removeClass('open'); // Closes it

In my case it was enough to add
e.stopPropagation();

Knockout JS - Modal forms not playing nice with Bootstrap

Been working for about 2 weeks to get a CRUD system working with knockout and it's slowly coming along. I keep hitting issues everytime I try to add buttons.
Currently my biggest issue at the moment is that my add button which is suppose to clear all values from my news and give me a blank form to fill in. Currently I have it loaded in a modal form using bootstrap. On my site the screen fades as if it's about to show you the modal DIV but nothing happens.
http://jsfiddle.net/rqwku4kb/3/
self.AddNewIncident = function() {
var id = this.ID;
$('#myModal').modal('show')
self.currentIncident(null);
;
};
Would anyone have any ideas?

Use Knockout to control your modal, just like everything else. If you're reaching around the viewmodel to fiddle with the DOM, things will go wrong.
Twitter bootstrap 3 Modal with knockout

Modals will close when the background is clicked so you need to suppress that using one of two ways. Either prevent the closing of the modal due to a background click using bootstrap attributes as below:
Via javascript :
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
HTML:
<div id="myModal" class="modal fade" role="dialog" data-bind="with: currentIncident" data-backdrop="static" data-keyboard="false">
Or alternatively suppress the background click event. When you click on the new button the click event fires for the button and then bubbles / propagates up through the DOM thus triggering a background click which in turn closes the dialog again.
So either suppress propagation in the handler:
self.AddNewIncident = function(data, ev) {
var id = this.ID;
$('#myModal').modal('show');
self.currentIncident(null);
ev.stopPropagation();
};
or in the click binding such that knockout will do this for you:
<button type="button" class="btn btn-success" value='Edit' data-toggle="modal" data-target="#myModal" data-bind="click: AddNewIncident, clickBubble: false">New</button>

Close any Bootstrap 3 popover with click on any buttons therein?

I have an app that will have several popovers that uses the html of a hidden DIV. This content may contain a button or buttons that will possibly do something in the app and close the popover, or just close the popover ("Cancel"). Like this:
What I'm looking for is a generic, extensible solution that I can apply to the button(s) to simply close the popover that contains them.
I don't want to wire this with anything specific to a particular button and/or popover.
I tried this and it does not work:
<button class="btn btn-link btn-xs" data-toggle="popover">Cancel</button>

Here you go this also works for tablet to tap outside the popover to hide it.
//HIDES POPOVER ON TABLET WHEN CLICK OUTSIDE
$('html').on('mouseup', function(e) {
if(!$(e.target).closest('.popover').length) {
$('.popover').each(function(){
$(this.previousSibling).popover('hide');
});
}
});

Close all open dialog boxes? (JQuery)

How can I close all opened dialog boxes in jQuery?
The situation is next: I have a simple page without dialogs. It has some buttons what open it owns dialogs.
When I click on a button I need to close all opened dialogs.
Here is the HTML:
<div id="buttons">
Button 1
Button 2
Button 3
</div>
<div id="dialog_1" class="dialogbox">...</div>
<div id="dialog_2" class="dialogbox">...</div>
<div id="dialog_3" class="dialogbox">...</div>
And here is the jQuery:
$(function() {
$('#buttons').find('a').click(function() {
// close all dialogs
$('.dialogbox').dialog("close");
// find out clicked id and open dialog
var nr = this.id.split("_")[1];
$('#dialog_'+nr).dialog();
});
});
The Chrome say: Uncaught Error: cannot call methods on dialog prior initialization; attempted to call method 'close'.
I was tried to check $('.dialogbox').dialog('isOpen'), but same result.
How can I close all dialogs?

Since they all inherit the same class, this is the best way to select all and close by:
$(".ui-dialog-content").dialog("close");

You can simple try this as they all have the .ui-dialog-content class, so select by that and close them, like this:-
$(".ui-dialog-content").dialog("close");