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 Modals を使用するように変更するには?

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>

次に、モーダル '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 Pluginは本当にこれに対する答えです。関数呼び出しは jquery ダイアログ ボックスの呼び出しと同じですが、モーダル ブートストラップ スタイルを表示するために、ダイアログ ボックスの周りに div が自動的に追加されます。上記のリンクからブートストラップ ライブラリを追加または盗むだけで、iframe を使用する必要はありません。

于 2014-06-12T16:09:37.627 に答える