如何制作一个模态框来显示完整的 PHP 页面 - how can I make a modal box to show a full php page?

how can I make a modal box to show a full php page?

我的一个页面上有一个用jquery设计的模型框，我想知道是否可以使这个模态显示一个完整的动态php页面？

您可以使用

load()函数，该函数非常易于使用，并且文档齐全：http://api.jquery.com/load/。它会在所选元素（例如模态的正文）中加载一个页面，只需调用 URL。

将 iframe 用于模态框

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Trigger Modal in iFrame</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
          <iframe src="/user/dashboard" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>  
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Iframe src将拥有您的动态页面。

包括 bootstrap.css 和 bootstrap.js

例如：，

<a data-toggle="modal" href="your_url content to show" data-target="#myModal">Click</a>
<div id="#myModal"></div>

参考 http://getbootstrap.com/javascript/#modals

像这样使用 jQuery load()，

j查询部分

<!-- Load jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- A button on the page -->
<body>
    <button>Fetch Page</button>
</body>
<!--
1. Attach click event to 'button' with jQuery on()
2. Create a modal box dynamically with append()
3. Load 'the_dynamic_page.php' with jQuery load()
-->
<script>
$('body').on('click','button',function(){
    $('body').append("<div id='modal_box' style='border:1px solid #999;position:fixed;top:50%;left:45%;padding:0 0.75%;font-family:Calibri,Candara,Arial;'></div>");
    $('#modal_box').load('the_dynamic_page.php');
});
</script>

the_dynamic_page.php

这个页面可以简单地显示一个文本，比如"我在模态框中！"或来自数据库的内容。