jQuery 使用 Bootstrap 将数据从模态传递到父窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27554027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass data to parent window from modal using Bootstrap
提问by Damon
As an example, I have a page that when loads, lists all employees. There is a button on the page that when clicked, initializes a (bootstrap) modal with a form. I populate the form, and click 'Submit'. If the insert was successful, I get the json object back as a response so that I can add the newly created employee to the list - which is behind the modal - without a page refresh.
例如，我有一个页面，当加载时，列出所有员工。页面上有一个按钮，单击该按钮时，会使用表单初始化（引导）模态。我填写表格，然后单击“提交”。如果插入成功，我会返回 json 对象作为响应，以便我可以将新创建的员工添加到列表中 - 位于模态后面 - 无需刷新页面。
Everything is working fine. I am getting the json back - and I'm ready to send the data back to the parent window. I knew it would be somewhat tricky, but this SO post gave me hope.
一切正常。我正在取回 json - 我准备将数据发送回父窗口。我知道这会有些棘手，但是这篇 SO 帖子给了我希望。
jQuery
jQuery
Employee.createEmployee(function (response) {
$(window.opener.document).find('#mytable').html($.parseJSON(response));
});
So far all I'm able to do is get this error back:
到目前为止，我所能做的就是恢复这个错误：
Uncaught TypeError: Cannot read property 'document' of null
I am launching the modal via javascript instead of data-attribute in hopes that would allow a better hook back to the parent window:
我正在通过 javascript 而不是 data-attribute 启动模式，希望可以更好地挂回父窗口：
jQuery
jQuery
$('#createemployeebtn').click(function (event) {
$('#newemployeemodal').modal();
});
No such luck.
没有这样的运气。
回答by MattD
Whatever information you can access with your modal can also be added to your page.
您可以使用模态访问的任何信息也可以添加到您的页面。
$(function() {
$('#btnLaunch').click(function() {
$('#myModal').modal('show');
});
$('#btnSave').click(function() {
var value = $('input').val();
$('h1').html(value);
$('#myModal').modal('hide');
});
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<h1></h1>
<button type="button" id="btnLaunch" class="btn btn-primary">Launch Modal</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Enter text:</p>
<input type="text" id="txtInput">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btnSave" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->This example pops a modal when a button is clicked. You can then enter text in the input and click the save changes button, and the h1 tag on the page will be set to use that text. You can pop the modal again, change the text in the input field, click the save changes button, and the h1 tag will now display the new text.
此示例在单击按钮时弹出一个模态。然后您可以在输入中输入文本并单击保存更改按钮，页面上的 h1 标签将被设置为使用该文本。您可以再次弹出模态，更改输入字段中的文本，单击保存更改按钮，h1 标签现在将显示新文本。
This example should illustrate that whatever items are set in the modal can be used to set items on the page that produces that modal.Any element or variable the page has access to, your modal has access to as well.
这个例子应该说明在模态中设置的任何项目都可以用于在生成该模态的页面上设置项目。页面可以访问的任何元素或变量，您的模态也可以访问。
