Nintex Forms – Add a Modal Popup

In the 3rd post in this series, I’m going to cover adding a modal popup to your Nintex Forms using the really cool SimpleModal library. Let’s get started.

So the first thing we’ll want to do is add references to the jquery.js and simplemodal.js libraries to our Nintex Form. Within Settings, you’ll need to expand the Advanced section and add the following two entries to the Custom Javascript Includes section:

1
2
https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js
https://someurl/jquery.simplemodal.js</em>

Let’s also add the css we plan to use for the custom modal. This should be added to the Custom CSS section on the Settings page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* Modal styles */
#simplemodal-overlay { background-color:#000; }
#simplemodal-container {
  background-color:#333;
  border:8px solid #444;
  padding:12px;
  width:500px;
  height:130px;
  color: #BBB;
  font: 1em/1.4em 'Lucida Sans Unicode','Lucida Grande',Sans-Serif;
}
h2.modal-title {
  color: #5F87AE;
  font-weight: normal;
  margin:5px;
  text-transform: uppercase;
}
a.modal-link, a.modal-link:link, a.modal-link:visited {
  color: #81A9D0;
  text-decoration: none;
}
a.modal-link:hover {
  color:#5f87ae; text-decoration:none;
}
p.modal-paragraph {
  margin:5px;
  padding:5px 0px;
}

Save the settings. Next, we’ll work on setting up the link that users will click on to load the modal and then the content for the modal itself.

On your form, add a Rich Text control. Double click the control and Edit the HTML Source. Add the following html:

1
<a class="basic" style="text-decoration:underline;cursor:hand">click here</a>

Save the control. Next, let’s setup the actual content we want to show in our modal. Again, add a Rich Text control to your form. Double click the control and Edit the HTML Source. Add the following html:

1
2
3
4
<div id="modal-content" style="display:none">
    <h2 class="modal-title">Sample Title</h2>
    <p class="modal-paragraph">Add a description or a paragraph that you want to show in the modal popup. Or link to something: <a class="modal-link" href="http://blog.qumsieh.ca">Shereen's Blog</a>.</p>
</div>

Save the control. The reason we set a display:none to the div is so it doesn’t show on the form unless the link is clicked.

Finally, let’s wire up the function that will be responsible for displaying the modal on click of the link. The best way to do this is to create a new custom.js file, and add the following content:

1
2
3
4
5
$(document).ready(function() {
    $('.basic').click(function (e) {
        $('#modal-content').modal({overlayClose:true});
    });
});

Save the custom.js file, and we’ll want to upload it to the same location as the simplemodal and jquery files. You can then head back to the Settings page and add the reference to that file.

Save and Publish your form, test it out! You should get something like this:

That’s it! How simple is that? Any questions, let me know!

5 Responses to “Nintex Forms – Add a Modal Popup”

  1. Dan January 23, 2013 at 10:52 pm #

    Great post.. just wondering though, would it be possible to do a similar thing but when selecting the Save / Submit button a modal shows a thank you (with some of the data submitted) and on close goes about redirecting to what ever page it is sent off to.

  2. shereen January 24, 2013 at 10:54 am #

    Hmmm great question Dan. So do you mean on close of the modal it would redirect?

  3. Moe May 27, 2015 at 1:51 pm #

    I have tried the solution and it doesnt seem to work. the form just loads…

  4. Laurie November 19, 2015 at 12:41 am #

    Hi
    I noticed the bottom image links are broken. Can these be restored please.
    By the way what is meant by “we’ll want to upload it to the same location as the simplemodal and jquery files”? I ask because it looks like these files are located on the Internet. Maybe you are meant to install simplemodel files locally?

Trackbacks/Pingbacks

  1. Nintex Forms – Add a Modal Popup | SharePoint Development & Ops | ARB Security Solutions - SharePoint Security Integrators - January 19, 2013

    […] SharePoint Blog Post From SharePoint Development – Google Blog Search: In the 3rd post in this series, I'm going to cover adding a modal popup to your Nintex Forms […]

Leave a Reply