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>

当模式弹出并点击＆＃34; google＆＃34;时，我希望看到模式中显示的页面。可能吗？我不必使用模态但想要解决方案＆＃34;兼容＆＃34;用bootstrap。

感谢您的帮助。

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进行尝试。

希望这个答案对你有所帮助。

bootstrap / modal：如何在其中显示页面？

1 个答案: