javascript - 从外部源加载模式内的链接答案

【问题标题】：javascript - load link inside modal from external sourcejavascript - 从外部源加载模式内的链接
【发布时间】：2016-08-11 20:52:52
【问题描述】：

我正在尝试使用从其他来源加载一些代码的模式创建一个动态网站，在这种情况下，我希望我的用户使用链接从模式视图中选择产品，然后使用类似这样的确认按钮

主页 -> 按钮 -> 加载模式（模式源是外部页面（“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>

谢谢

【问题讨论】：

您是否只是想将 HTML 从源加载到您的模态中？ iFrame 可以完成这项工作吗？
加载prod_detail.php的代码在哪里？
@webdeb 我正在使用模态，因为我需要从页面取回数据
你可以使用 window.parent
我写了一个例子，你可以如何使用 iframe 来做到这一点..

标签： javascript jquery html modal-dialog bootstrap-modal

【解决方案1】：

您的主窗口：

<!-- 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>

【讨论】：