twitter-bootstrap 单击表格行时如何显示模态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28580946/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 22:20:38 来源:igfitidea点击:
How to show a modal when a table row is clicked?
提问by Lemon Juice
I am trying to display a modalwhen a table row is clicked. Below are the important parts of the code. I am using Bootstrap.
我试图在modal单击表格行时显示 a 。下面是代码的重要部分。我正在使用Bootstrap.
<%@page import="java.sql.Date"%>
<%@taglib prefix="c" uri= "http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Passport</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable( {
"scrollY": "200px",
"scrollCollapse": true,
"paging": false
} );
} );
jQuery(document).ready(function($) {
$(".clickable-row").click(function() {
$('#editModal').modal('show');
});
});
</script>
</head>
<body>
<div id="header"></div>
<!-- Navigation -->
<nav class="navbar navbar-fixed-top" role="navigation" id="navbar_top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar navbar-fixed-top mytopbar" >
<!-- Top Menu Items -->
<ul class="nav navbar-right top-nav myul">
<li class="dropdown" id="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> William Harold <b class="caret"></b></a>
<ul class="dropdown-menu">
<li> <a href="#"><i class="fa fa-fw fa-user"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-fw fa-envelope"></i> Inbox</a> </li>
<li> <a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a> </li>
<li class="divider"></li>
<li> <a href="#"><i class="fa fa-fw fa-power-off"></i> Log Out</a> </li>
</ul>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-default mynav" id="navbar_second">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header menu">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a href="#menu-toggle" class="btn menu" id="menu-toggle"><img src="images/icon_menu.png" width="20" height="20"/>Menu</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input id="search_input" type="text" class="form-control" placeholder="Start typing a patient name..">
</div>
<button type="submit" class="btn btn-default"><img src="images/search.png" /></button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-fw fa-gear"></i>Recent</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="wrapper">
<!-- Sidebar -->
<div id="main-sidebar-wrapper" style="margin-top:50px; width:150px;">
<ul class="sidebar-nav" style="margin-top:10px;">
<li> <a href="#"> Face Sheet</a> </li>
<li> <a href="#">Designation</a> </li>
<li class="li_active" > <a href="#">Passport</a> </li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Sidebar -->
<div id="sidebar-wrapper" style="margin-top:50px;">
<ul class="sidebar-nav main-nav" style="margin-top:10px;">
<li > <a href="#"> <span" class="glyphicon glyphicon-home" aria-hidden="true"> Home</span> </a> </li>
<li class="main-nav-active"> <a href="#"><span" class="glyphicon glyphicon-user" aria-hidden="true"> Patients</span></a> </li>
<li> <a href="#"><span" class="glyphicon glyphicon-calendar" aria-hidden="true"> Calender</span></a> </li>
<li> <a href="#"><span" class="glyphicon glyphicon-ok-sign" aria-hidden="true"> Tasks</span></a> </li>
<li> <a href="#"><span" class="glyphicon glyphicon-credit-card" aria-hidden="true"> Billing </span></a> </li>
<li> <a href="#"><span" class="glyphicon glyphicon-folder-open" aria-hidden="true"> Documents </span></a> </li>
<li> <a href="#"><span" class="glyphicon glyphicon-stats" aria-hidden="true"> Reports </span></a> </li>
<li> <a href="#"><span" class="glyphicon glyphicon-dashboard" aria-hidden="true"> Meaningful</span></a> </li>
<hr>
<li> <a href="#"><span" class="glyphicon glyphicon-wrench" aria-hidden="true"> Admin</span></a> </li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<div class="row row-top">
<div class="col-lg-12" style="margin-top:50px;">
<div class="col-md-3"> <img src="images/img6.jpg" width="70" height="70"/>
<p style="border-bottom:solid #666 1px;"><strong>John Generalmend Demo</strong></p>
<p>17 Jul 1956 (58 yrs)</p>
<p>0123456789</p>
</div>
<!--
<div class="col-md-2">
<p>ALLERGIES</p>
<div class="allergy_box">Peanut</div>
</div>
<div class="col-md-7 ">
<button class=" btn btn-default btn-sm"><img alt="print" title="print" src="images/mailButton.png" width="30" height="20"/><span class="help_button">Pt. Msg</span></button>
<button class=" btn btn-default btn-sm"><img alt="print" title="print" src="images/printButton.png" width="30" height="20"/> <span class="help_button">Print</span></button>
<button class=" btn btn-default btn-sm"><img alt="print" title="print" src="images/bookButton.png" width="30" height="20"/><span class="help_button">Pt. Ed. </span></button>
<button class="dropdown btn btn-default btn-sm" id="dropdown">
<img alt="print" title="print" src="images/noteButton.png" width="30" height="20"/><span class="help_button">+ Note</span> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li> <a href="#"><i class="fa fa-fw fa-user"></i> link</a> </li>
<li> <a href="#"><i class="fa fa-fw fa-envelope"></i> link</a> </li>
<li class="divider"></li>
<li> <a href="#"><i class="fa fa-fw fa-power-off"></i> link</a> </li>
</ul>
</button>
<button class="dropdown btn btn-default btn-sm" id="dropdown">
<img alt="print" title="print" src="images/scriptButton.png" width="30" height="20"/><span class="help_button">Scripts</span> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li> <a href="#"><i class="fa fa-fw fa-user"></i> link</a> </li>
<li> <a href="#"><i class="fa fa-fw fa-envelope"></i> link</a> </li>
<li class="divider"></li>
<li> <a href="#"><i class="fa fa-fw fa-power-off"></i> link</a> </li>
</ul>
</button>
<button class="dropdown btn btn-default btn-sm" id="dropdown">
<img alt="print" title="print" src="images/ordersButton.png" width="30" height="20"/><span class="help_button">Orders</span> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li> <a href="#"><i class="fa fa-fw fa-user"></i> link</a> </li>
<li> <a href="#"><i class="fa fa-fw fa-envelope"></i> link</a> </li>
<li class="divider"></li>
<li> <a href="#"><i class="fa fa-fw fa-power-off"></i> link</a> </li>
</ul>
</button>
<button class="dropdown btn btn-default btn-sm" id="dropdown">
<img alt="print" title="print" src="images/exchangeButton.png" width="30" height="20"/><span class="help_button">Exchange</span> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li> <a href="#"><i class="fa fa-fw fa-user"></i> link</a> </li>
<li> <a href="#"><i class="fa fa-fw fa-envelope"></i> link</a> </li>
<li class="divider"></li>
<li> <a href="#"><i class="fa fa-fw fa-power-off"></i> link</a> </li>
</ul>
</button>
</div>
-->
</div>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row" style="margin-bottom:20px">
<form class="form-horizontal" method="post" action="PassportSrvlt?idEmployee=1" >
<fieldset id="modal_form">
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="textinput">Passport Number</label>
<div class="col-md-3">
<input id="textinput" name="passportNumber" type="text" value="${requestScope.passportNumber}" class="form-control input-md" >
</div>
<!-- Text input-->
<label class="col-md-2 control-label" for="textinput">Passport date</label>
<div class="col-md-3">
<input id="textinput" name="passportDate" type="date" value="${requestScope.passportDate}" class="form-control input-md" >
</div>
<!-- button-->
<button type="submit" class="btn btn-primary">Save</button>
</div>
</fieldset>
</form>
</div>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-6" > <small><u>Reminder Section</u></small>
<!-- Multiple Checkboxes -->
<div class="control-group">
<label class="control-label" for="checkboxes"></label>
</div>
</div>
<div class="col-lg-6" id="div_above_table"> <a class="btn btn-default" data-toggle="modal" data-target="#addModal">+ New Reminder</a> </div>
</div>
<div class="row">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Date Renewal</th>
<th>Reminder Date</th>
<th>Reminder Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Date Renewal</th>
<th>Reminder Date</th>
<th>Reminder Status</th>
</tr>
</tfoot>
<tbody>
<tr class='clickable-row' data-toggle="modal" data-target="#editModal" style="cursor:pointer">
<td> <c:out value="${currentPassportBean.dateRenewalDue}"/></td>
<td> <c:out value="${currentPassportBean.reminderDate}"/></td>
<td> Active</td>
</tr>
<c:forEach var="historyPassportBean" items="${requestScope['historyPassportBean']}" >
<tr>
<td><c:out value="${historyPassportBean.dateRenewalIssued}"/></td>
<td><c:out value="${historyPassportBean.dateRenewalIssued}"/></td>
<td>Deactivated</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<!-- /.row -->
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Menu Toggle Script -->
<script>
$("#wrapper").toggleClass("toggled");
$("#menu-toggle").hover(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#sidebar-wrapper").hover(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
<!-- add New Job modal -->
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <a href="#" data-dismiss="modal"> <img src="images/arrow-back-512.png" width="30px" height="30px"> <small>Back</small></a> <span id="myModalLabel" style="margin-left:20px;"><font size="+2"><b>Add to problem list</b></font></span> </div>
<div class="modal-body">
<form class="form-horizontal" method="post" action="InsertPassportReminderSrvlt?idEmployee=1" >
<fieldset id="modal_form">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Date Renewal Due</label>
<div class="col-md-6">
<input name="dateRenewalDue" type="date" class="form-control input-md" >
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Reminder Date</label>
<div class="col-md-6">
<input name="reminderDate" type="date" class="form-control input-md">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!-- /add New Job modal -->
<!-- Edit Job modal -->
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <a href="#" data-dismiss="modal"> <img src="images/arrow-back-512.png" width="30px" height="30px"> <small>Back</small></a> <span id="myModalLabel" style="margin-left:20px;"><font size="+2"><b>Add to problem list</b></font></span> </div>
<div class="modal-body">
<form class="form-horizontal" method="post" action="InsertPassportReminderSrvlt?idEmployee=1" >
<fieldset id="modal_form">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Date Renewal Due</label>
<div class="col-md-6">
<input name="dateRenewalDue" type="date" class="form-control input-md" >
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Reminder Date</label>
<div class="col-md-6">
<input name="reminderDate" type="date" class="form-control input-md">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!-- /Edit Job modal -->
</body>
</html>
Please pay attention to this area
请注意这个区域
<tr class='clickable-row' data-toggle="modal" data-target="#editModal" style="cursor:pointer">
That is where I am trying to show that model when the row is clicked. However, nothing is happening. I am not a designer, how can I fix this please?
这就是我试图在单击该行时显示该模型的地方。然而，什么也没有发生。我不是设计师，请问如何解决？
回答by DavidG
The jQuerycode in your question isn't needed and you didn't include your modal HTML. However, if you use your code as is, remove the jQuery and add a modal with an id of editModalit will work. This is because your clickable row has a data-target of #editModaland Bootstrap picks this up for you.
jQuery不需要您问题中的代码，并且您没有包含模态 HTML。但是，如果您按原样使用代码，请删除 jQuery 并添加一个带有editModal它的 id 的模式。这是因为您的可点击行有一个数据目标，#editModalBootstrap 会为您选择它。
For example:
例如：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Date Renewal</th>
<th>Reminder Date</th>
<th>Reminder Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Date Renewal</th>
<th>Reminder Date</th>
<th>Reminder Status</th>
</tr>
</tfoot>
<tbody>
<tr class='clickable-row' data-toggle="modal" data-target="#editModal" style="cursor:pointer">
<td></td>
<td></td>
<td>Active</td>
</tr>
</tbody>
</table>
<!-- Edit Job modal -->
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <a href="#" data-dismiss="modal"> <img src="images/arrow-back-512.png" width="30px" height="30px"> <small>Back</small></a> <span id="myModalLabel" style="margin-left:20px;"><font size="+2"><b>Add to problem list</b></font></span> </div>
<div class="modal-body">
<form class="form-horizontal" method="post" action="InsertPassportReminderSrvlt?idEmployee=1" >
<fieldset id="modal_form">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Date Renewal Due</label>
<div class="col-md-6">
<input name="dateRenewalDue" type="date" class="form-control input-md" >
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Reminder Date</label>
<div class="col-md-6">
<input name="reminderDate" type="date" class="form-control input-md">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!-- /Edit Job modal -->回答by rmorrin
You're using data-attributes and JavaScript to initialize/show your modal, it's meant to be one or the other.
您正在使用数据属性和 JavaScript 来初始化/显示您的模态，它应该是其中之一。
In your example, remove your modal js the modal should show correctly.
在你的例子中，删除你的模态js，模态应该正确显示。
jQuery(document).ready(function($) {
/* this is not needed
$(".clickable-row").click(function() {
$('#editModal').modal('show');
});
*/
});
You are also missing a closing </div>in the markup of both of your modals:
您还缺少</div>两个模态标记中的结尾：
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal"> <img src="images/arrow-back-512.png" width="30px" height="30px"> <small>Back</small>
</a><span id="myModalLabel" style="margin-left:20px;"><font size="+2"><b>Add to problem list</b></font></span>
</div>
<div class="modal-body">
<form class="form-horizontal" method="post" action="InsertPassportReminderSrvlt?idEmployee=1">
<fieldset id="modal_form">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Date Renewal Due</label>
<div class="col-md-6">
<input name="dateRenewalDue" type="date" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Reminder Date</label>
<div class="col-md-6">
<input name="reminderDate" type="date" class="form-control input-md">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div> <!-- This is missing from both modals -->
