Modal popup of list

Question

Hi All

I have seen numerous comments regarding how to create a modal popup in sharepoint but cannot for the life of me figure out how to do this. I have Sharepoint foundation 2013 and have a list app containing a phone directory of all my users from Active Directory (I have a powershell script running in the background doing this). On my homepage, I have "Other Applications links" in which I have links and images to points of interest in my site.  One of them points to the Phone Directory list and this works fine. What I want to do is open the list in a modal popup box. I have found lots of snippets of code on how to do this but am unsure of where the code needs to be inserted (webpage/sharepoint designer etc)

A push in the right direction would be really appreciated

Thanks

Answer 1

do you mean open up the list in a new small pop out window (dialog box)?

if so try>

settings >> advanced settings >> Launch forms in a dialog >> Yes

---

www.vwcampervandirectory.co.uk

Answer 2

Thanks Barnsley7

I tried changing that but no joy. I went to the settings of my list application for my phone directory and set launch forms in a dialog - Yes but this did not work.

Answer 3

try this
//java script
function OpenDialog(itemid){
         var options = {
   url:"path for sharepoint list display page"+itemid,
   width: 780,
   height: 600,
   dialogReturnValueCallback: DialogCallback
   };
   SP.UI.ModalDialog.showModalDialog(options);
   }
       
   function DialogCallback(dialogResult, returnValue){
   }
html
<a href="javascript:OpenDialog('1')">open as Dialog</a>
http://ardaniderege.blogspot.co.il/

Answer 4

Hi,
We can use jQuery to achieve it, we can do as follows:
1. Find the ID of the <a/> tag through Internet Explorer F12 developer tools(which is Tile_WPQ2_4_3 in my site).
2. Add a content edit web part on the page.
3. Edit the web part and insert  the code below into it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#Tile_WPQ2_4_3").click(function () {
            SP.UI.ModalDialog.ShowPopupDialog($("#Tile_WPQ2_4_3").attr("href"));
            return false;
        });
    });
</script>

Best Regards,
Dennis Guo

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time.
Thanks for helping make community forums a great place.

Answer 5

Thansk derege A

Where would I insert this code?

Answer 6

You can add code to:

1) The masterpage. Every page that uses this masterpage will use the code.

2) Page layout. Every page that uses this layout will run the code (but pages of other layouts will not).

3) A Single page. Only this page will run the code. Since you are talking about the homepage only, that would be the suggestion Dennis Guo did. You need to add a content editors webpart to the page and add the code in the html source view.

Answer 7

Thanks Dennis

That did the trick. I do have a couple more questions if thats ok.

How can I make other links on my page open in a modal window? Such as the quick links on the left handside and also other links added such as in content editor

Is there a way to resize the modal window if I was linking to an external webpage form for example

Many thanks