Okay, I don't like to answer my own question, but I've got a solution that is 100% foolproof (as far as I can tell). I've ended up going for a solution that checks for an existing dialog and modifies that, rather than hiding it and showing a new one.

Here's a working jsfiddle (using echo in the ajax call where it normally loads a html template)...

http://jsfiddle.net/ArchersFiddle/0302gLav/9/

The code is part of a larger library I'm working on, but I'll post it here anyway as it may well prove useful to others.

JavaScript Library

(function () {



    var _defaultOptions = {

        backdrop: static,

        close: true,

        keyboard: true

    };



    window.bootstrap = {

        modal: {

            show: function (options) {



                options = $.extend(_defaultOptions, options);



                var buttonText = ;



                for (var key in options.buttons) {



                    options.buttons[key].id = button_ + key.split( ).join();



                    var button = options.buttons[key];



                    buttonText += <button type=button  +

                        id= + button.id +   +

                        class=btn  +

                        (typeof (button.class) == undefined ? btn-default : button.class) +   +

                        (typeof (button.dismiss) == undefined ?  : data-dismiss=modal ) + > +

                        key + </button>;

                }



                $.ajax({

                    url: templates/bootstrap-modal.html

                })

                .done(function (data) {

                    data = data

                        .replace({:Title}, options.title)

                        .replace({:Body}, options.body)

                        .replace({:Buttons}, buttonText);



                    var $modal = $(#bootstrap-modal);

                    var existing = $modal.length;



                    if (existing) {

                        $modal.html($(data).find(.modal-dialog));

                    }

                    else {

                        $modal = $(data).appendTo(body);

                    }



                    for (var key in options.buttons) {

                        var button = options.buttons[key];

                        if (typeof (button.callback) !== undefined) {

                            $(# + button.id).on(click, button.callback);

                        }

                    }



                    $modal.off(shown.bs.modal).on(shown.bs.modal, function(e) {

                        if (typeof(options.onshow) === function) {

                            options.onshow(e);

                        }

                    });



                    if (!existing) {

                        $modal.modal(options);

                    }



                    if (options.large === true) {

                        $modal.find(.modal-dialog).addClass(modal-lg);

                    }



                    if (options.close === false) {

                        $modal.find(button.close).remove();

                    }

                });

            },

            hide: function (callback) {

                var $modal = $(#bootstrap-modal);



                if (!$modal.length) return;



                $modal.on(hidden.bs.modal, function(e) {

                    $modal.remove();

                    if (typeof(callback) === function) {

                        callback(e);

                    }

                });



                $modal.modal(hide);

            }

        }

    };

})();

Template HTML

<div id=bootstrap-modal class=modal fade>

  <div class=modal-dialog>

    <div class=modal-content>

      <div class=modal-header>

        <button type=button class=close data-dismiss=modal><span aria-hidden=true>&times;</span><span class=sr-only>Close</span></button>

        <h4 class=modal-title>{:Title}</h4>

      </div>

      <div class=modal-body>{:Body}</div>

      <div class=modal-footer>

        {:Buttons}

      </div>

    </div>

  </div>

</div>

Example usage:

bootstrap.modal.show({

    title: Dialog Title,

    body: <p>This is the dialog body and can contain any old html rubbish.</p>,

    buttons: {

        Close: {

            dismiss: true

        }

    }

});

Further options explained

bootstrap.modal.show({

    backdrop: true,                     // show the backdrop

    close: true,                        // show the close button

    keyboard: true,                     // allow the keyboard to close the dialog

    title: Dialog Title,

    body: <p>This is the dialog body and can contain any old html rubbish.</p>,

    buttons: {

        Button1: {

            class: btn-primary,           // any class you want to add to the button

            dismiss: false,                 // does this button close the dialog?

            callback: function() {          // button click handler

                // the button was clicked - do something here

            }

        },

        Button2: {

            // options as defined as above.  You can have as many buttons as you want

        }

    },

    onshow: function(e) {

        // this will trigger when the dialog has completed the show animation

    }

});

and

bootstrap.modal.hide(function(e) {

    // this will trigger when the dialog has completed the hide animation

});

All the options in the show() method are optional, but obviously you'll want a title and a body.