Displaying list from another site collection, want items to open in a modal dialog

Question

Here is the code I'm using. Keep in mind that I know practically nothing about javascript and borrowed the code from someone else. He hasn't had time to look at it yet. I'm just trying to modify it to open each list item in a modal dialog. This is SharePoint 2010.

<div id="ExternalListContainer"></div>
<script type="text/javascript">
  //wait for SP to load up
  ExecuteOrDelayUntilScriptLoaded(
        function LoadExternalList() {
  //turn on xsite scripting support for jquery
    $.support.cors = true;
    //load the external SP list
    $("#ExternalListContainer").load("http://sourcesiteurl.aspx table.ms-listviewtable", 
        function(response, status, xhr) {
      //find all the list items and convert to HTML so we don't see the code
      $("#ExternalListContainer").find(".ms-vb2").each(function () {
             $(this).html($(this).text());
      });
    });
  }, "sp.ribbon.js");
</script>

Answer 1

Is it a regular list view? If yes, then you can set up the default behavior in the List Settings > Advanced Settings with Launch forms in a dialog? option.

Otherwise you can use SP.UI.ModalDialog.ShowPopupDialog(url) to open the link into a popup/modal or the other related methods.

EDIT

You can create a new column into your list with the type "Calculated (calculation based on other columns)". In the formula you'll enter:

="<a href='#' onclick='SP.UI.ModalDialog.ShowPopupDialog(""http://url.to/your/Lists/Name of the List/DispForm.aspx?ID="&ID&""")'>Open Modal</a>"

And "Number" for the data type.

(Don't forget to change "http://url.to/your/Lists/Name of the List/" with your own URL)

Then make sure to show this new column into the view. You'll see a link called "Open Modal" in the just-created column and when you click on that link it will open the Display Form into a modal.