title: Show a modal popup in jquery datatable
body: <p>My requirement is to show a table using jquery datatable and also popup a modal window on rowclick of the table.
  Data is showing in a table and also row values are coming while clicking on the particular row.
  Now i need to show a modal popup window which will contain row data and checkboxes will come on the basis of the count of the data. </p>
  
  <p>How can i do this?</p>
  
  <p>For your reference i have created a JS Fiddle:  </p>
  
  <p><a href="https://jsfiddle.net/znqn1kfd/" rel="nofollow noreferrer">https://jsfiddle.net/znqn1kfd/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input type='button' class="glbBtnN" value="View Users" id="btnView" /&gt;
      &lt;table id="tblUserDetials" cellspacing="0" width="100%" class="display responsive nowrap"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Menu Code&lt;/th&gt;
                  &lt;th&gt;Page Name&lt;/th&gt;
                  &lt;th&gt;Main Menu&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
      &lt;/table&gt;
      &lt;div id="divPopUp"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>var result = [{ "MenuCode": "UTHRR001", "PageName": "XYZ", "MainMenu": null }, 
                { "MenuCode": "UTHRR002", "PageName": "ABC", "MainMenu": "UTHRR001"}]               
  
  $("#btnView").on('click', function () {
     $('#tblUserDetials').DataTable({
             "aaData":result,
              "columns": [{ "data": "MenuCode" }, { "data": "PageName" }, { "data": "MainMenu" }]
          });
          $(document).on("click", "tbody tr[role='row']", function () {
              alert($(this).closest('tbody tr').children('td:eq(0)').text() + ',' + $(this).closest('tbody tr').children('td:eq(1)').text())
          });
      });
  </code></pre>