jQuery 单击表格行时创建模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30472552/
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
Create modal when table row was clicked
提问by jas_newgirl
How am I going to create to a modal where the user could edit the content from the selected row inside a table? Can someone please teach me on how to do this? I kinda new in web development and I just need to do this as a requirement. Thanks!
我将如何创建一个模式，用户可以在其中编辑表格内选定行的内容？有人可以教我如何做到这一点吗？我在 Web 开发方面有点新，我只需要按照要求执行此操作。谢谢！
Here's my code (HTML):
这是我的代码（HTML）：
<div class="row">
<div class="col-xs-12 col-md-12">
<table class="table table-condensed table-hover table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Sam</td>
<td>Smith</td>
</tr>
</tbody>
</table>
</div>
</div>
回答by Guruprasad Rao
Ok. Here is the simple DEMOwith bootstrap based modal and below is the code:
好的。这是带有基于引导程序的模态的简单演示，下面是代码：
<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" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">EDIT</h4>
</div>
<div class="modal-body">
<p><input type="text" class="input-sm" id="txtfname"/></p>
<p><input type="text" class="input-sm" id="txtlname"/></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Relevant JS
相关JS
$('table tbody tr td').on('click',function(){
$("#myModal").modal("show");
$("#txtfname").val($(this).closest('tr').children()[0].textContent);
$("#txtlname").val($(this).closest('tr').children()[1].textContent);
});
Note -this is just a simple demo! you need to modify as per your needs!!
注意 -这只是一个简单的演示！你需要根据你的需要修改！！
回答by Kevin F
This is a simple modal without any transitions or animations or content. Basically you build a container, position it in the center of the screen, then hide and show it (animate it in, animate it out) on click.
这是一个简单的模态，没有任何过渡、动画或内容。基本上，您构建一个容器，将其放置在屏幕中央，然后在单击时隐藏并显示它（将其设置为动画，将其设置为动画）。
Here is a working plunkr: http://plnkr.co/edit/0hHcW4Es46VrHEZkme8m
这是一个工作 plunkr：http://plnkr.co/edit/0hHcW4Es46VrHEZkme8m
<style>
.modal{
background-color: #fff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: 600px;
z-index: 1000;
display: none;
}
.overlay{
background-color: rgba(0,0,0,0.6);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
display: none;
}
</style>
<div class="overlay" id="overlay"></div>
<div class="modal" id="modal"></div>
(function(document){
var modal = document.getElementById('modal');
var overlay = document.getElementById('overlay');
var clickElement = //select whatever you want to trigger the click
var openModal = function(){
modal.style.display = 'block';
overlay.style.display = 'block';
};
var closeModal = function(){
modal.style.display = 'none';
overlay.style.display = 'none';
};
clickElement.addEventListener('click', openModal);
overlay.addEventListener('click', closeModal);
})(document);
