我有一个html表，单击每一行会以链接的方式弹出一个模式窗口，即，如果我单击模式窗口的行，它将创建另一个模式窗口。
但是，当所有模式窗口都打开时，我无法访问父窗口。我希望可以同时访问父窗口和生成的两个模式窗口。
我的代码段在这里： https://jsfiddle.net/youser/xm4uzvLk/
HTML代码如下：
class ViewController: UIViewController,UITableViewDataSource,UITableViewDelegate,UICollectionViewDelegate,UICollectionViewDataSource{
let array = ["product 1","product 2","product 3","product4"]
let array1 = ["product id 1","product id 2","product id 3","product id 4"]
let array2 = [["product id 1","product id 2"],["product id 3","product id 4"],["product id 5","product id 6"],["product id 7","product id 8","product id 9","product id 10","product id 11"]] as [NSArray]
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return array.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell : TableViewCell = tableView.dequeueReusableCell(withIdentifier: "cells") as! TableViewCell
cell.tableviewlabel1.text = array[indexPath.row]
cell.tableviewlabel2.text = array1[indexPath.row]
return cell
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return array2.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell : CollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "collection", for: indexPath) as! CollectionViewCell
let rowValue : NSArray = array2[indexPath.row]
for i in 0..<rowValue.count {
cell.collectionviewlabel1.text = rowValue[i] as? String
}
return cell
}
下面是JS代码：
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel='stylesheet' href='https://cdn.datatables.net/plug-ins/1.10.6/integration/bootstrap/3/dataTables.bootstrap.css'/>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'/>
<script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<script src='https://cdn.datatables.net/plug-ins/1.10.6/integration/bootstrap/3/dataTables.bootstrap.js'></script>
<script src = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">On click row popup will get open </h3>
</div>
<table id="jobs" class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Job Title</th>
<th>Company</th>
<th>Salary</th>
<th>Location</th>
<th>Date Posted</th>
</tr>
</thead>
<tbody>
<!--Made it easier, so no more redundant copypasta in other pages-->
<tr>
<td>1</td>
<td>VP Marketing</td>
<td>Devify</td>
<td>22.38</td>
<td>222 Lillian Hill</td>
<td>2015-02-17</td>
</tr>
<tr>
<td>2</td>
<td>Administrative</td>
<td>Skiba</td>
<td>10.92</td>
<td>3 Corscot Terrace</td>
<td>2015-02-03</td>
</tr>
<tr>
<td>3</td>
<td>Database Admini</td>
<td>Dynazzy</td>
<td>36.72</td>
<td>5082 Butterfield Ter</td>
<td>2015-01-30</td>
</tr>
<tr>
<td>4</td>
<td>Quality Control</td>
<td>Realmix</td>
<td>23.48</td>
<td>598 Independence Cir</td>
<td>2015-02-19</td>
</tr>
<tr>
<td>5</td>
<td>Health Coach II</td>
<td>Linkbuzz</td>
<td>17.11</td>
<td>18 Donald Plaza</td>
<td>2015-02-17</td>
</tr>
<tr>
<td>6</td>
<td>Biostatistician</td>
<td>Roomm</td>
<td>36.37</td>
<td>3 Almo Terrace</td>
<td>2015-02-16</td>
</tr>
</tbody>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<table id="example" class="table table-striped table-hover responsive">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Jenna Elliott</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>33</td>
<td>2008/11/28</td>
<td>$5,300</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>System Architect</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$5,000</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$4,200</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$5,300</td>
</tr>
</tbody>
</table>
</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>
</div>
</div>
<!---- second modal window with datatable -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<table id="example2" class="table table-striped table-hover responsive">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Mark Nixon</td>
<td>System Architect</td>
<td>Bristol</td>
</tr>
<tr>
<td>Steve Murchison</td>
<td>Director</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
</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>
</div>
</div>
<!-- /.modal -->
<style type="text/css" class="init"> body {
font-size: 140%;
}
</style>
</body>
</html>
请帮助我达到此要求。 谢谢。