bootstrap/modal：如何在其中顯示頁面？

我有一個模式如下圖所示：bootstrap/modal：如何在其中顯示頁面？

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h3 class="modal-title">Modal Demo</h3> 
     </div> 
     <div class="modal-body"> 
     <a href="https://www.google.com">google</a> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div>

當模態彈出，我點擊「谷歌」，我希望看到的模態中所示的頁面。可能嗎？我不必使用模態，但想要與引導程序「兼容」的解決方案。

感謝您的幫助。

來源

2017-07-06 user180574

是的，可以用模態顯示頁面，讓我給你簡單的回答， –

將這個代碼在HTML

<div class="modal fade bs-modal-sm" id="modal" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     </div> 
    </div> 
</div>

jQuery函數

function show_modal(target, title, size) { 
    jQuery('#modal').removeData('bs.modal'); 
    jQuery('.modal-content').html(''); 
    jQuery('.modal-dialog').removeClass('modal-lg'); 
    jQuery('#modal').removeClass('create_event_task'); 
    jQuery('.modal-dialog').addClass(size); 
    var newTarget = target.indexOf("?") >= 0 ? target + '&modal-title=' + title : target + '?modal-title=' + title; 
    jQuery('#modal').modal({remote: encodeURI(newTarget)}); 
}

呼叫JQuery的功能，採用Onclick事件。

show_modal('admin_users', 'Delete User', '');

我用我的應用程序中的該功能打開一個頁面，則可以使用URL嘗試。

希望這個答案對你有幫助。

來源

2017-07-06 05:02:54

太好了，謝謝！我現在沒有時間，但我會稍後再拍。只是一個簡單的問題，如果你知道：假設谷歌網頁顯示在模態，我點擊其搜索結果之一，目標網頁也將在模態？ – user180574

我很抱歉，在我測試時它並不真正起作用。它適用於目標來自同一臺服務器的情況，但當我使用https://www.google.com時不起作用。你可以在這裏查看：https://jsfiddle.net/jh3obbp0/。謝謝。 – user180574

@ user180574，這件事我也在我的回答中說過，它在我的應用程序中工作。 –

bootstrap/modal：如何在其中顯示頁面？

回答

相關問題