Homepage / Doc / Informational Dialog Popup

Informational Dialog Popup

With a little setup, you can add informational dialogs to your survey as shown here.

informational dialog example

This requires very little javascript as well as some setup in your question text. Here is an example of the javascript required.

$(function() {
    $("#dialog").dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        }
    });

    $("#showmydialog").on("click", function() {
        $("#dialog").dialog("open");
    });
});

As you can see we have added a click event to a div with an id of “showmydialog”. Once clicked, it will trigger jQuery UI to create a dialog of the contents of the div “dialog”.

Here is an example of my questions source code, which can be added by clicking on the <> button in your question text editor.

Test Item
<br />
<br />Do you require additional information ? If so, <span id="showmydialog" style="color: #ff0000;"><strong>click here.<br /></strong></span>
<div id="dialog" style="display: none;" title="Basic dialog">
    <p>This dialog can be utilized to show any type of information. It is a great way of allowing your users to gain contextual information about a question.The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
November 17, 2016