bootstrap-modal - Bootstrap /模式 : how to show page within it?

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>

当模式弹出并单击“google”时，我希望看到模式中显示的页面。是否可以？我不必使用模态，但希望解决方案与 Bootstrap “兼容”。

感谢您的帮助。

Answer 1

Put this code in 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

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

Call JQuery function , using Onclick event.

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

我正在使用此功能在我的应用程序中打开一个页面，您可以尝试使用 URL。

希望这个回答对你有帮助。