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

发布时间：2020-12-17 21:21:37 所属栏目：安全来源：网络整理

导读：我有以下代码用于使用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,button

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

解决方法

你可以使用标准的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})
});

Demo of iFrame inside modal

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!