Bootstrap Modal iframe

回覆文章
yehlu
Site Admin
文章: 3244
註冊時間: 2004-04-15 17:20:21
來自: CodeCharge Support Engineer

Bootstrap Modal iframe

文章 yehlu »

http://stackoverflow.com/questions/1662 ... trap-modal

You could use the standard Bootstrap modal markup..

代碼: 選擇全部

<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>
[code]
and then use modal 'show' event to dynamically set a different iframe src..

[code]
$('#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
回覆文章

回到「HTML + CSS」