Jquery ui 如何在引导模式上修改jquery ui对话框

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

功能帮助（部分）{
$（“#userpopup”）.remove（）；
$（“正文”）。追加（“”）；
$（'#userpopup'）。对话框({
自动打开：对，
宽度：560，
身高：500，
按钮：{
“OK”：函数（）{
$（此）.dialog（“关闭”）；
$（“#userpopup”）.remove（）；
}
},
打开：功能（事件、用户界面）{
$（“#userpopup”）.html（“”）；
},
beforeClose:函数（事件、ui）{
$（“#userpopup”）.html（“”）；
}
});
返回false；

}

---

如何将其更改为使用引导模式？

您可以使用标准引导模式标记

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

你可以看看

---

它基于bootstrap 3.x，只是为了补充@Kris Zhang的答案：这才是真正的答案。函数调用与jquery对话框的调用相同，但它会自动在对话框周围添加div，以显示模式引导样式。只需从上面的链接添加或窃取引导库，您就不需要使用iFrame。

请注意，这是不鼓励使用的，因此答案应该是搜索解决方案的终点（而不是另一个参考的中途停留，它往往会随着时间而过时）。请考虑在这里添加一个独立的概要，保持链接作为参考。很好的黑客，直到你意识到事件（打开，关闭等）没有实现。也许我遗漏了一些我已经拥有的混乱的引导和jqueryui。

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

$('#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})
});