How to modify the jquery-ui dialog on bootstrap modal

Question

I have this following code for making a confirm dialog using jQuery UI:

function Help(section) {

$("#userpopup").remove();
$("body").append("<div id='userpopup' title='Help' style='display:none'></div>");

$('#userpopup').dialog({
    autoOpen: true,
    width: 560,
    height: 500,
    buttons: {
        "OK": function () {
            $(this).dialog("close");
            $("#userpopup").remove();
        }
    },
    open: function (event, ui) {
        $("#userpopup").html("<iframe width='100%' height='400' src='?help&section=" + section + "' frameborder='0' marginwidth='0' marginheight='0' allowtransparency='true'></iframe>");
    },
    beforeClose: function (event, ui) {
        $("#userpopup").html("");
    }
});


return false;

}

<input onClick="javascript:Help('templates')" type="button" class="btn" value="help">

How to change it to use Bootstrap Modals?

Answer 1

You could use the standard Bootstrap modal markup..

<input id="btnHelp" type="button" class="btn" value="help">

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Dialog</h3>
    </div>
    <div class="modal-body">
          <iframe src="" width="100%" height="400" frameborder="0"></iframe>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">OK</button>
    </div>
</div>

and then use modal 'show' event to dynamically set a different iframe src..

$('#helpBtn').click(function(){

    $('#myModal').on('show', function () {
        var frameSrc = "?help&section=templates"; // value can be passed from button
        $('iframe').attr("src",frameSrc);

    });
    $('#myModal').modal({show:true})
});

Demo of iFrame inside modal

Answer 2

Just to add on to @Kris Zhang's answer: The Bootstrap Jquery Plugin is really the answer to this. The function calls are the same as those of jquery dialog boxes but it automatically adds the divs around the dialog box in order to display the modal bootstrap style. Just add or steal the bootstrap library from the link above and you don't need to use iframes.