ブートストラップ/モーダル：その中にページを表示するには？

Question

は、私は以下のようなモーダルいる：モーダルがポップアップし、私は「グーグル」をクリックすると、私はモーダル内に表示されるページを参照してください

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

期待しています。出来ますか？私はモーダルを使用する必要はありませんが、ソリューションはブートストラップと "互換"したいと思います。

ありがとうございました。

Answer 1

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)}); 
} 

Onclickイベントを使用して、jQueryの関数を呼び出します。私は自分のアプリケーション内で開いているページのために、この機能を使用しています

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

、あなたはURLを使用して、それを試すことができます。

この回答が役に立ちます。