从外部源加载链接内部模态
load link inside modal from external source
我试图创建一个动态网站使用模态加载一些代码从其他来源,在这种情况下,我希望我的用户选择一个产品从模态视图使用链接,然后一个确认按钮像这样
主页->按钮->加载模态(模态源是外部页面("prods.php"))->使用按钮->模态内选择产品->模态现在显示("prod_detail.php") ->确认->数据返回到主页
这是我的模态加载外部源的实际代码,但我不能让它加载新的prod_detail,因为它在主窗口打开
//called when user clicks login
function login() {
$("#main-username").val($("#modal-username").val());
$("#main-result").val($("#modal-result").val());
$("#myModal").modal("hide");
}
//called when the modal is closed, logs values grabbed from the modal in login()
$('#myModal').on('hidden', function() {
console.log('username : '+$("#main-username").val());
console.log('result : '+$("#main-result").val());
})
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- button to trigger modal -->
<a href="prods.php" data-target="#myModal" data-toggle="modal">remote modal</a>
<!-- hidden fields to store modal result in -->
<input type="text" id="main-username">
<input type="text" id="main-result">
<!-- modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal test</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-primary" onclick="login();">Login</button>
</div>
</div>
</body>
</html>
谢谢
你的主窗口:
<!-- hidden fields to store modal result in -->
<input type="text" id="main-username">
<input type="text" id="main-result">
<script>
window.setData = function(data) {
console.log('data from iframe', data);
}
</script>
<!-- modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<iframe src="/prods.php"></iframe>
</div>
…prods.php
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal test</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-primary" onclick="window.parent.setData("HI from iframe")">Say Hi to Main Window</button>
</div>
相关文章:
- 我想使用模态通过php文件发送邮件,并且我希望在提交关闭后关闭pop
- 打开一个模态并将其链接到AngularJS中的指令
- 使用jQuery防止模态内部的元素关闭模态
- 从模态内部的主体复制一个谷歌地图
- 如何从url中显示模态内部的信息
- 当使用angular.js和ui.bootstrap时,从模态内部的按钮单击事件未触发
- 如何在模态内部单击按钮时调用函数
- 使用Javascript在模态内部的标签上显示错误消息不起作用
- 形式内部模态赢得't使用jQuery提交
- 模态内部的链接
- 控制器内部的角度位置固定(角度模态?)
- 模态不是函数内部的函数
- 如何检查是否在模态内部
- 点击模态内部按钮后刷新或重新加载模态
- Jquery + Bootstrap Modal,打开另一个模态内部…为什么
- 在模态内部的引导折叠回调函数不起作用
- 需要在模态内部删除按钮,删除模态和它的按钮
- 从外部源加载链接内部模态
- 跟踪模态内部HTML表单中的更改
- 将可折叠的内部模态dos't保持打开状态