如何制作一个模态框来显示完整的 PHP 页面
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">×</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
这个页面可以简单地显示一个文本,比如"我在模态框中!"或来自数据库的内容。
相关文章:
- AngularJs|Don'在成功加载所有指令htmls之前,不显示页面
- 如何仅在横向模式下显示页面
- 突出显示页面上嵌入的iframe中的单词
- 仅显示页面AngularJS上的特定选项卡
- 在显示页面之前使用 jquery ajax 加载图像和声音
- 显示页面一旦完全加载涡轮链接
- jQuery移动显示页面5秒钟,然后重定向
- 启用面板向左滚动时,如何在左侧部分显示页面
- Twitter引导选项卡显示页面加载时未触发事件
- Chart.js显示页面加载时的工具提示
- 当单击按钮时,隐藏已显示页面加载的段落
- 如何在后台加载图像,然后在完成后显示页面
- 如何让 JQuery 在显示页面之前交换图片
- 如何在页面完成加载之前显示页面加载 html 文件
- 在模式窗口中显示页面上单击的值(链接)以及索引值
- 在文本区域中显示页面行
- 在谷歌阿贾克斯中显示页面加载微调器
- 在页面之间显示“页面加载”消息
- 记录单击的链接,然后在框中显示页面名称作为历史记录
- 如何在表单域中显示页面标题