4

我有以下代码用于使用 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 模态？

4

3 回答 3

6

您可以使用标准的 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>

然后使用 modal '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})
});

模态框内的 iFrame 演示

于 2013-05-18T12:45:47.353 回答
5

只是补充@Kris Zhang 的答案：Bootstrap Jquery 插件确实是这个问题的答案。函数调用与 jquery 对话框的调用相同，但它会自动在对话框周围添加 div 以显示模式引导样式。只需从上面的链接添加或窃取引导库，您就不需要使用 iframe。

于 2014-06-12T16:09:37.627 回答
1

你可以看看 Bootstrap jQuery 插件

它基于引导程序 3.x

于 2013-10-18T09:58:18.490 回答