Question

我有以下代码，用于使用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">

如何更改它以使用Bootstrap Modals？

Answer 1

您可以使用标准的Bootstrap模态标记..

<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>

然后使用模态'show'事件来动态设置不同的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

再加上@Kris Zhang的回答：Bootstrap Jquery Plugin就是答案。函数调用与jquery对话框的函数调用相同，但它会自动在对话框周围添加div，以显示模态引导样式。只需添加或窃取上面链接中的bootstrap库，您就不需要使用iframe。

Answer 3

您可以查看Bootstrap jQuery Plugin

它基于bootstrap 3.x

如何在bootstrap模式上修改jquery-ui对话框

3 个答案: