How to access parent window when the modal window is open?

Question

I have a html table, clicking on each rows pops up a modal window in a chaining fashion i.e if I click on the row of the modal window it will create another modal window.

However, I am not able to access the parent window while all the modal windows are open. I want the parent window and the two modal windows generated to be accessible at the same time.

My snippet is here : https://jsfiddle.net/youser/xm4uzvLk/

The HTML code goes below:

$(document).ready(function() {
  var companyTable = $('#jobs').DataTable();
  $('#jobs').on('click', 'tr', function() {
    var table = $('#example').DataTable();
    $('#myModal').modal("show");
  });

  $('#example').on('click', 'tr', function() {
    var table = $('#example2').DataTable();
    $('#myModal2').modal("show");
  });
});

body {
  font-size: 140%;
}

<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">
<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">&times;</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">&times;</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 -->

Please help me achieve this requirement. Thanks.

Answer 1

These are boot strap modal overlays, not modal windows. Bootstap creates them as floating divs sitting on top of the page content. There is no parent page as such, its all just the page. You can access anything on the page from an on click event triggered by a button click on the modal.

Test this by adding some javascript on the page, eg

<script type='text/javascript'>
function testClick(){
alert('click');
}
</script>

Then add an onclick event to any of your modal overlay buttons, eg

<input type=button onclick='testClick()' value='click me' />