Insert a button that gives a pop-up additional information window when clicked

Thanks for your response. Is this the only way? Or is there a way to bring up the list of words as a pop-up box that can be opened and closed over the survey page?

Great! How would I do that step-by-step? (sorry, I'm new to Qualtrics)

Perfect! Thank you!

> @ccpollon said:
> Hi, could you please tell me how to modify the code to include more than one pop-up boxes? thanks

Its not in Best practice to show more than one pop-up boxes on single click.

Paste the following code in the Header(in look and feel)
` <link href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="//code.jquery.com/jquery-1.12.4.js"></script><script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>`


Step 1: Paste the following code in the question HTML view
`<button id="btn1">Click Me!</button><span id="dialog" title="1. Qualtrics Community Service">Is this what you want CSonn ?</span> <span id="dialog1" title="2. Qualtrics Community Service">Is this what you want CSonn ?</span>`

Step 2: Paste the following code in the js(OnReady) of the question

jQuery("[id*='dialog1']" ).dialog({ autoOpen: false,position: { my: " top", at: "top", of: window } });
jQuery('body').on('click','.ui-widget-overlay',function(){ jQuery("[id*='dialog1']").dialog('close'); });

jQuery("[id*='dialog']" ).dialog({ autoOpen: false});
jQuery('body').on('click','.ui-widget-overlay',function(){ jQuery("[id*='dialog']").dialog('close'); });

jQuery( "#btn1" ).click(function() {
jQuery("#dialog").dialog( "option", "modal", true );
jQuery("#dialog").dialog( "open" );
jQuery("#dialog1").dialog( "option", "modal", true );
jQuery("#dialog1").dialog( "open" );
});

Step 3: Output
!


Note: If you want different button pops up different pop up then change the following lines of code

`<button id="btn1">Click Me1!</button><button id="btn2">Click Me2!</button>`

And

jQuery( "#btn1" ).click(function() {
jQuery("#dialog").dialog( "option", "modal", true );
jQuery("#dialog").dialog( "open" );
});
jQuery( "#btn2" ).click(function() {
jQuery("#dialog1").dialog( "option", "modal", true );
jQuery("#dialog1").dialog( "open" );
});

Sorry it did not get the html code:

1. HTML, header:
#
<link href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /><script src="//code.jquery.com/jquery-1.12.4.js"></script><script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
#

2. HTML, footer:
#
<button id="btn1">Definition of A</button><span id="dialog" title="Definitions">A is ...</span><button id="btn2">Definition of B</button><span id="dialog" title="Definitions">B is ...</span>
#

3. And in the js(OnReady) section:
Qualtrics.SurveyEngine.addOnReady(function()
{
/Place your JavaScript here to run when the page is fully displayed/

jQuery("[id='dialog1']" ).dialog({ autoOpen: false,position: { my: " top", at: "top", of: window } });
jQuery('body').on('click','.ui-widget-overlay',function(){ jQuery("[id='dialog1']").dialog('close'); });

jQuery("[id='dialog']" ).dialog({ autoOpen: false});
jQuery('body').on('click','.ui-widget-overlay',function(){ jQuery("[id='dialog']").dialog('close'); });

jQuery( "#btn1" ).click(function() {
jQuery("#dialog").dialog( "option", "modal", true );
jQuery("#dialog").dialog( "open" );
});
jQuery( "#btn2" ).click(function() {
jQuery("#dialog1").dialog( "option", "modal", true );
jQuery("#dialog1").dialog( "open" );
});
});

Thanks @Shashi,
I'm having a look at it now. Any idea why the html code I paste isn't visualised here?
Anyway, this is what Ive done before:
!

Thank you very much @Shashi ! Now it works!!

Hello @CSonn ,

button (e.g. yellow button, black text)
`<button style="background-color: yellow;color: black;" >Button</button>`

> @CSonn said:
> Thanks Shashi! Where would I paste that script? In the JS part or the HTML part - and does it have to be pasted somewhere specific within that text?

In the HTML part of the question and you need to add ` style="background-color: yellow;color: black;" ` -this attribute in the button as shown in above code.

So your new code will be

`<button style="background-color: yellow;color: black;" id="btn1">Click Me!</button><span id="dialog" title="Qualtrics Community Service">Is this what you want CSonn ?</span>`

Hi guys! How do I change the code such that it does not display text after popping up, but an image? And how do I properly store the image such that the code can retrieve it?

I'm stuck 😀

Hallo to you all! I hope everyone is doing ok during these complicated times. I am writing to this community for the first time. I have followed this and other conversation about how to develop a pop-up window in a survey and I am very grateful for those of you who shared their codes, which I was able to copy to work on my survey. However, I am experiencing an issue. I have 2 questions each with multiple items and for each of these items I would like to have a pop-up window showing the associated definition. While the code works for the first questions it does not seem to work for the second questions. Below I posted my code and if anyone would be able to help I would really appreciate it.
This is my code:
I hope it is clear what I did. I basically repeated the code for both questions. Is this correct?

Thank you for any help you may be able to provide!
Ale

Hi guys, 

I’ve a similar query wherein I’m trying to add a button which says ”Comment” so when the user clicks on it the text entry field appears to enter the comment.

 

Can I get some guidance how this can be acheived.

Thank You!