热从bootstrap弹出窗口到主页面获取值，并将值设置为input元素 [英] Hot to get value from bootstrap popup to main page and set the value into a input element

问题描述

请原谅，我是MVC / HTML / bootstrap / JQuery的绝对初学者，需要帮助。我在网上发现了很多文章，但我没有设法解决我的问题。我想打开一个弹出窗口，我可以在其中写一个小文本，用保存按钮关闭弹出窗口，读取值并将其放入主页面的文本字段中。

我感谢任何帮助。这是我的代码：

Please excuse me, I'm an absolute beginner in MVC/HTML/bootstrap/JQuery and need help. I have found many articles on the Web, but I did not manage to solve my problem. I want to open a popup, where i can write a small text, close the popup with the "save" button, read the value and put it into the textfield in the main page.
I appreciate any help. here is my code:

<script src="~/Scripts/jquery-2.1.4.js"></script>

<script type="text/javascript">
    $('#myModal').on('hidden.bs.modal', function (e) {
        //get value from #myPopupInput and set the value to #myMainPageInput
    })
</script>

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">open popup</a>

<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">
                input in popup:
                <input type="text" class="form-control" id="myPopupInput" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close (do nothing)</button>
                <button type="button" class="btn btn-primary">Save changes (but popup does not even close)</button>
            </div>
        </div>
    </div>
</div>
<br />

input in main page: 
<input type="text" class="form-control" id="myMainPageInput" />

推荐答案

（' ＃myModal'）。on（' hidden.bs.modal'， function （e） {
// 从#myPopupInput获取值并将值设置为#myMainPageInput
}）
< / script >

< a class = btn btn-primary btn-lg data -toggle = modal data-target = ＃myModal > 打开弹出窗口< / a >

< div class = modal fade id = myModal tabindex = - 1 角色 = 对话框 aria-labelledby = myModalLabel aria-hidden = true >
< div class = modal-dialog >
< div class = modal-content >
< div class = modal-header >
< 按钮 类型 = 按钮 class = close data-dismiss = modal aria-hidden = true > ×< /按钮 >
< h4 class = modal-title id = myModalLabel > 模态title < / h4 >
< / div >
< div class = < span class =code-keyword> modal-body >
弹出式输入：
< input 类型 = text class = form-control id = myPopupInput / >
< / div >
< div class = modal-footer >
< 按钮 类型 = 按钮 class = btn btn-default data-dismiss = modal > 关闭（不要） ing）< / button >
< 按钮 < span class =code-attribute> type = button class = btn btn-primary > 保存更改（但弹出窗口甚至不关闭）< / button >
< / div >
< / div >
< / div >
< / div >
< br / > $ b主页中的
$ b输入：
< 输入 类型 = text class = 表单控制 id <跨班=code-keyword> = myMainPageInput / >

('#myModal').on('hidden.bs.modal', function (e) { //get value from #myPopupInput and set the value to #myMainPageInput }) </script> <a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">open popup</a> <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"> input in popup: <input type="text" class="form-control" id="myPopupInput" /> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close (do nothing)</button> <button type="button" class="btn btn-primary">Save changes (but popup does not even close)</button> </div> </div> </div> </div> <br /> input in main page: <input type="text" class="form-control" id="myMainPageInput" />

Bootstrap模式是其中的一部分页面，所以你应该可以做这样的事情：

A Bootstrap modal is part of the same page, so you should be able to do something like this:

（' ＃myModal'）。on（' hidden.bs.modal'， function （e）{
var value =

('#myModal').on('hidden.bs.modal', function (e) { var value =

这篇关于热从bootstrap弹出窗口到主页面获取值，并将值设置为input元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！