Take the 2-minute tour ×

I can't figure out how to implement confirm dialog with bootstrap modal, this is my code that doesn't work:

<div id="id" class="modal hide">
    <div class="modal-header">
    <div class="modal-body">
        <p>confirm message</p>
    <div class="modal-footer">
        <button data-dismiss="modal" class="btn">No</button>
        <button id="id-confirm" class="btn btn-primary">Yes</button>
<a id="a" href="http://example.com">link</a>
<script type="text/javascript">
    var confirmed = false;
    var modal = $('#id');
    var clickee = $('#a');

    clickee.click(function() {
        if (!confirmed) {
            return false;
    $('#id-confirm').click(function() {
        confirmed = true;

When I click on the link link, the dialog pops up, but when I confirm it, no redirect happens, when I click on the link link again, I get redirected.

I could just redirect to the href of the link, I know that, but I want to make it reusable, instead of link (a element) I could also want to use button or define onclick event on the button.

Thanks for your answers.

share|improve this question

3 Answers 3

Let me first understand this.

You need to click on a link upon which a bootstrap confirm modal needs to open and then on clicking yes, the user needs to go to a different link?

If that's the case:

<a id="a" href="#id" data-toggle="modal">link</a>

and then why don't you redirect on button click of id-confirm

You need to remove href="http://example.com" because the bootstrap modal does not know which div should be opened.

share|improve this answer
I am opening the div for bootstrap by javascript (and it gets opened, so I don't see a problem here), but when I click on "yes", I want to get the button that triggered the confirm dialog window clicked but this time without prompting for confirmation. Note that it is similar behaviour to this: ​<a href="google.com" onclick="return confirm('are you sure?');">link</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​‌​​​​​​​​​​​​​​​​​ –  VaclavDedik Nov 17 '12 at 21:33
in that case you need to do do a redirect from your javascript after it has been confirmed. I dont understand why you are doing clickee.click() again. all thats going to do is reopen the modal. –  keshav Nov 17 '12 at 21:53

in jQuery, Click() does not activate the <a>-tag as it was clicked by an user, it will only just call any onclick= you have attached.

In fact, clickee.click(); only calls your anonymous function clickee.click(function() {, but nothing happends, because confirmed is true (try to insert an alert in click() to proof) . When you click again, second time, the click event is not halted (stopPropagation) by bootstrap, and now it works like a normal link. Thats what you experience.

I am not completely sure what you want, but if you want to activate the link, after confirm, redirect is the easiest way (I know you didnt want that, but you cant do it with click() either, as the code is by now)

     confirmed = true;

would work, and reuseable with other tag types like <button>, as long as you have specified a href attribute.

share|improve this answer

There's a library that does a lot of this for you: http://bootboxjs.com. YMMV

share|improve this answer
This was perfect! So easy to use. –  Matt Chambers Apr 24 at 16:23

Your Answer


