twitter-bootstrap 使用表单数据在模态中动态设置文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24020761/
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
Dynamically set text in modal using form data?
提问by CastleCorp
I am working on making a website and I am having some trouble.
我正在制作一个网站，但遇到了一些麻烦。
On one page there is a table of names that looks something like this:
在一页上有一个名称表，看起来像这样：
<table class="table" id="table">
<thead>
<tr>
<th id="name">Teacher</th>
<th id="courses">Courses</th>
</tr>
</thead>
<tbody>
<tr>
<td><a data-toggle="modal" href="#myModal" id="1">Katherine Crowley</a></td>
<td>English</td>
</tr>
<tr>
<td><a data-toggle="modal" href="#myModal" id="2">Seraphine Hamilton</a></td>
<td>English</td>
</tr>
There are more entries, but that is a good example. When you click on the name in the table, "Katherine Crowley" in this example, a modal opens up, where I would like to have information on the person. Here is the code for the modal:
还有更多条目，但这是一个很好的例子。当您单击表格中的姓名（在本例中为“Katherine Crowley”）时，会打开一个模式，我想在其中获得有关此人的信息。这是模态的代码：
<div class="modal" id="myModal">
<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" href="#name"></h4>
</div><div class="container"></div>
<div class="modal-body">
Content
<br>
<br>
<br>
<p>more content</p>
<br>
<br>
<br>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
The idea is that the title of the modal will be set to the name of the person, and then in the content area, the courses will be listed.
这个想法是将模态的标题设置为人名，然后在内容区域中，将列出课程。
Does anyone know how I can do this??
有谁知道我怎么能做到这一点？？
I am fairly new to all of this, so as much detail as possible would be appreciated.
我对这一切都很陌生，所以尽可能多的细节将不胜感激。
Thanks!
谢谢！
EDIT: Look in the comments below this. Dan commented a link to another question, where I found what I was looking for. If a mod could mark this question as a duplicate, that it would be appreciated.
编辑：看看下面的评论。丹评论了另一个问题的链接，在那里我找到了我要找的东西。如果 mod 可以将此问题标记为重复，将不胜感激。
回答by Francisco Goldenstein
I prefer to show the dialog programaticaly instead of using a convention (href has the ID of the modal container). This is what I do:
我更喜欢以编程方式显示对话框而不是使用约定（href 具有模态容器的 ID）。这就是我所做的：
$(".edit-object").click(function () {
// sets modal's controls
$("#txtDamageTypeName").val(damageType.Name); // damageType is a JS object
// shows modal
$('#mdlEdit').modal('show'); where mdlEdit is the ID of the modal container.
});
I hope it helps. If you have any other doubt, please let me know.
我希望它有帮助。如果您有任何其他疑问，请告诉我。
回答by crashwap
To show the dialog as desired, you must use javascript (or better yet, jQuery).
要根据需要显示对话框，您必须使用 javascript（或者更好的是，jQuery）。
Some changes were made to your HTML, mostly for positioning via css.
对您的 HTML 进行了一些更改，主要用于通过 css 进行定位。
jQuery code makes things appear where they should.
jQuery 代码让事物出现在它们应该出现的地方。
CSS provide the spacings / colors / etc.
CSS 提供间距/颜色/等。
HTML:
HTML：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<table class="table" id="table">
<thead>
<tr>
<th id="name">Teacher</th>
<th id="courses">Courses</th>
</tr>
</thead>
<tbody>
<tr>
<td><a data-toggle="modal" href="#myModal" id="s-1">Katherine Crowley</a></td>
<td>English</td>
</tr>
<tr>
<td><a data-toggle="modal" href="#myModal" id="s-2">Seraphine Hamilton</a></td>
<td>History</td>
</tr>
</tbody>
</table>
<div class="modal" id="myModal">
<div class="modal-header">
<div class="header-left">
<h4 class="modal-title" href="#name"></h4>
</div>
<div class="header-right">
<button type="button" class="close_btn" data-dismiss="modal" aria-hidden="true">×</button>
</div><!-- .header-right -->
</div><!-- .modal-header -->
<div class="container">
<div class="modal-body">
<div class="modal-body-inner"></div>
</div><!-- .modal-body -->
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn close_btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div><!-- .modal-footer -->
</div><!-- .container -->
</div><!-- #myModal -->
<div id="overlay"></div>
CSS:
CSS：
th, td{border:1px solid lightgrey;width:150px;text-align:center;}
#myModal{width:50%;height:50%;position:absolute;top:20%;left:25%;}
#myModal{background:wheat;z-index:10;display:none;}
.modal-header{width:100%;height:15%;background:grey;color:white;}
.header-left {width:90%;height:100%;float:left;}
.header-left h4{padding:0;margin:0;}
.header-right{width:10%;height:100%;float:right;}
.close {float:right;}
.container{width:100%;height:85%;}
.modal-body{width:90%;height:70%;}
.modal-body-inner{width:60%;height:60%;padding-top:20%;padding-left:20%;}
.modal-footer{width:90%;height:30%;padding-left:10%;border-top:1px solid lightgrey;}
.modal-footer a {padding:0 10px;margin-top:15px;}
#overlay{width:100%;height:100%;position:absolute;top:0;left:0;}
#overlay{background:black;opacity:0.8;z-index:5;display:none;}
jQuery/javascript:
jQuery/javascript：
$('document').ready(function() {
$('[id^=s-]').click(function(){
var name = $(this).text();
var course = $(this).parent().next().text();
$('.modal-title').html(name);
$('.modal-body-inner').html(course);
$('#overlay').show();
$('#myModal').show();
});
$('.close_btn').click(function(){
$('#overlay').hide();
$('#myModal').hide();
});
$('.btn').button();
}); //END document.ready
Notes:
笔记：
Seems like a lot of code, but print both your original HTML and this revised HTML, and the differences will be immediately clear. Remember, most differences were for CSS styling purposes, which positions things correctly inside the dialog.
jQueryUI was only used to quickly style the buttons. However, the code does require jQuery. Disregard any js bigots who insist you must learn js before jQuery. Not true.
The modal dialog works by creating three z-indexes. Everything except the #overlay and the #modal-dialog are at the default z-index of 1. The overlay is above that, at value 5. Therefore, when the overlay is visible, all else is under the overlay and cannot be clicked on. Finally, the modal-dialog is above the overlay.
This
$('[id^=s-]')means any element whose ID begins withs-. Note that IDs cannot begin with numbers, and prefixings-provides something by which to select the anchor tag. Once you are in the click event,$(this)is whatever element was just clicked. So,$(this).attr('id');is the ID of the element that was just clicked. You can also isolate the numerical portion by split(splitting) it off, like so:var num = $(this).attr('id').split('-')[1];The top article re javascript being dead is included only becauseit does a great job of explaining what jQuery is and why it is (very) useful. Javascript is notdead, as the author has conceded in a newer blog entry.
看起来像很多代码，但是打印您的原始 HTML 和修改后的 HTML，差异将立即清晰。请记住，大多数差异是出于 CSS 样式的目的，即在对话框中正确定位内容。
jQueryUI 仅用于快速设置按钮样式。但是，该代码确实需要 jQuery。不要理会任何坚持必须在学习 jQuery 之前学习 js 的 js 偏执狂。不对。
模态对话框通过创建三个 z 索引来工作。除了 #overlay 和 #modal-dialog 之外的所有东西都在默认的 z-index 1 上。覆盖层在上面，值为 5。因此，当覆盖层可见时，所有其他的都在覆盖层下面，不能点击. 最后，模态对话框位于覆盖层上方。
这
$('[id^=s-]')意味着任何 ID以 开头的元素s-。请注意，ID 不能以数字开头，前缀s-提供了选择锚标签的依据。一旦你进入点击事件，$(this)就是刚刚点击的任何元素。因此，$(this).attr('id');是刚刚单击的元素的 ID。您还可以通过拆分（拆分）数字部分来隔离数字部分，如下所示：var num = $(this).attr('id').split('-')[1];包含有关 javascript 已死的顶级文章只是因为它很好地解释了 jQuery 是什么以及它为什么（非常）有用。Javascript 并没有消亡，正如作者在较新的博客条目中所承认的那样。
