引导程序中可点击表格行的模式 [英] Modal for clickable table rows in bootstrap
本文介绍了引导程序中可点击表格行的模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个3 rowed表格，我想单击每一行并在模式弹出窗口中更详细地描述每个表格的内容。问题是，当我点击屏幕会变得更暗一些时，但没有弹出窗口时显示出来。
<！DOCTYPE HTML>
< html lang =en>
< head>
< title>引导程序示例< / title>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js>< / script>
< script src =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js>< / script>
< script>
$（function（）{
$（'＃orderModal'）。modal（{
键盘：true，
背景：静态，
show：false ，
）。on（'show'，function（）{
var getIdFromRow = $（this）.data（'orderid'）;
//让您的ajax调用填充项目或甚至你需要
$（this）.find（'＃orderDetails'）。html（$（'< b>订购ID选择：'+ getIdFromRow +'< / b>'））$ b $ （''点击'，函数（）{
//（。数据目标））;
$（。table-striped或者在这里做你的操作，而不是显示模态，以便将值填充到模态。
$（'＃orderModal'）。data（'orderid'，$（this）.data（'id'））;
}）;
}）;
< / script>
< / head>
< body>
< div class =container>
< h1>订单< / h1>
< table class =table table-striped>
< thead>
< tr>
< th> ID< / th>
< th>客户< / th>
< th>状态< / th>
< / tr>
< / thead>
< tbody>
< tr data-toggle =modaldata-id =1data-target =＃orderModal>
< td> 1< / td>
< td> 24234234< / td>
< td> A< / td>
< / tr>
< td> 24234234< / td>
< td> A< / td>
< / tr>
< tr data-toggle =modaldata-id =3data-target =＃orderModal>
< td> 3< / td>
< td> 24234234< / td>
< td> A< / td>
< / tr>
< / tbody>
< / table>
< div id =orderModalclass =modal hide faderole =dialogaria-labelledby =orderModalLabelaria-hidden =true>
< div class =modal-header>
< h3>订单< / h3>
< / div>
< div id =orderDetailsclass =modal-body>< / div>
< div id =orderItemsclass =modal-body>< / div>
< div class =modal-footer>
< button class =btndata-dismiss =modalaria-hidden =true>关闭< / button>
< / div>
< / div>
< / div>
< / body>
< / html>
解决方案
原因是您可能使用最新的bootstrap和旧的HTML模式格式。
您的模式应该包含< div class =modal-dialog> 和< div class =modal-content> 元素。此外，实际版本中不再有 hide 类
< div id =orderModalclass =modal faderole =dialogaria -labelledby =orderModalaria-hidden =true>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
< h3>订单< / h3>
< / div>
< div id =orderDetailsclass =modal-body>< / div>
< div id =orderItemsclass =modal-body>< / div>
< div class =modal-footer>
< button class =btndata-dismiss =modalaria-hidden =true>关闭< / button>
< / div>
< / div>
< / div>
< / div>
另一件事是 show event ，它应该是 on（'show.bs.modal'） （'show'）
/jsfiddle.net/3oyd3qsz/rel =nofollow> DEMO
I have a 3 rowed table and I want to click on each row and describe more about the content of each in a modal pop out . The problem is when I click on the row the screen will go a bit darker but no pop up shows up
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#orderModal').modal({
keyboard : true,
backdrop : "static",
show : false,
}).on('show', function(){
var getIdFromRow = $(this).data('orderid');
//make your ajax call populate items or what even you need
$(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow + '</b>'))
});
$(".table-striped").find('tr[data-target]').on('click', function(){
//or do your operations here instead of on show of modal to populate values to modal.
$('#orderModal').data('orderid',$(this).data('id'));
});
});
</script>
</head>
<body>
<div class="container">
<h1>Orders</h1>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Customer</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr data-toggle="modal" data-id="1" data-target="#orderModal">
<td>1</td>
<td>24234234</td>
<td>A</td>
</tr>
<tr data-toggle="modal" data-id="2" data-target="#orderModal">
<td>2</td>
<td>24234234</td>
<td>A</td>
</tr>
<tr data-toggle="modal" data-id="3" data-target="#orderModal">
<td>3</td>
<td>24234234</td>
<td>A</td>
</tr>
</tbody>
</table>
<div id="orderModal" class="modal hide fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3>Order</h3>
</div>
<div id="orderDetails" class="modal-body"></div>
<div id="orderItems" class="modal-body"></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</body>
</html>
解决方案
The reason is that you're probably using the newest bootstrap and an old HTML modal format.
Your modal should include <div class="modal-dialog"> and <div class="modal-content"> elements. Also, there's no more hide class in the actual version of bootstrap
<div id="orderModal" class="modal fade" role="dialog" aria-labelledby="orderModal" 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">x</button>
<h3>Order</h3>
</div>
<div id="orderDetails" class="modal-body"></div>
<div id="orderItems" class="modal-body"></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
Another thing is the show event, which should be on('show.bs.modal'), not on.('show')
这篇关于引导程序中可点击表格行的模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
