Open Item in Modal/Dialog with Datatables

I am using a jQuery data table to display a Sharepoint list.

I have the title column hyperlinked to each item's display form. But I would like for this to open in the modal.

Below is my code for the list:

    <!-- jQuery -->
<script type="text/javascript" charset="utf8" 
src="https://uconnect.cbpnet.cbp.dhs.gov/sites/OIT/bems/bi/SiteAssets/TEST2/jquery-1.8.2.min.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css"
href="https://uconnect.cbpnet.cbp.dhs.gov/sites/OIT/bems/bi/SiteAssets/TEST2/jquery.dataTables.css">
<!-- DataTables -->
<script type="text/javascript" charset="utf8"
src="https://uconnect.cbpnet.cbp.dhs.gov/sites/OIT/bems/bi/SiteAssets/TEST2/jquery.dataTables.min.js"></script>


<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead><th>Parent System Name</th><th>System Name</th><th>Description</th></thead>
</table>


<script type="text/javascript">

function LoadZipCodes(state)
{
        var call = $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('All BEMS Applications')/items?"+
"$select=Title,System_x0020_Name,ID,Description&$top=5000",
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json;odata=verbose"
            }

        });

        call.done(function (data,textStatus, jqXHR){
                    $('#example').dataTable({
                "bDestroy": true,
                "bProcessing": true,
                "aaData": data.d.results,
                "aoColumns": [
                    { "mData": "Title",
                      "mRender" : function ( data, type, full ){ 
        return "<a href='https://uconnect.cbpnet.cbp.dhs.gov/sites/OIT/bems/bi/Lists/AllBEMSApps/DispForm.aspx?ID=" + full['ID'] + "' >" +full['Title']+"</a>"
        } 
          },
                    { "mData": "System_x0020_Name"},

                    { "mData": "Description"}
}
                ]
              });

              });


        call.fail(function (jqXHR,textStatus,errorThrown){
            alert("Error retrieving Tasks: " + jqXHR.responseText);
        });
}

window.onload = LoadZipCodes;

</script>

I tried adding:

function openDialog(pageUrl) { 
var options = {
    url: pageUrl,
    title: '',
    allowMaximize: false,
    showClose: true,
    width: 800,
    height: 700
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);       
}

And then modifying the link in the list as so:

return "<a href="#" onclick="openDialog ('https://uconnect.cbpnet.cbp.dhs.gov/sites/OIT/bems/bi/Lists/AllBEMSApps/DispForm.aspx?ID=" + full['ID'] + "');">" +full['Title']+"</a>"

But this did not work.

Is there another way to achieve this?

Thank you for any help you can provide.