Вопрос

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?

Это было полезно?

Решение

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

Другие советы

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.

You can have a look at Bootstrap jQuery Plugin

It's based on bootstrap 3.x

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top