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

For this you can add this text "click here...." as a hyper link so when user clicks on it, it will take user to that information page, PDF file or anything.

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?

That can also be done along with mouse over using the html tags.

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

Perfect! Thank you!

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

> @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" ); });

Thank you @Shashi! Yes, I'd like to have different button pops up displaying different texts. I copied and pasted the code (all in the HTML header/footer as I cannot find the way to switch to HTML for the body of the question) and in the js(OnReady) section. It partially works; it creates one pop up button that when I click shows the text that I want. However, even if the second button is visible when I click it nothing happens. I believe I must have made a mistake somewhere but I'm not sure where. This is what I have done: 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" ); }); }); Any idea why I can visualise both buttons but only one works when I click on it? Thank you

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" ); }); });

@ccpollon , See the question text block of this link

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: !

@ccpollon , After the "Defination of B" the span should have id="dialog1"

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

Is it possible to give the button a colour (e.g. yellow button, black text)?

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

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?

> @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>`

Is there anyway to further change the layout of the button? More specifically, I would like to make it a circle instead of a square and nicer color, e.g. dark red. Thank you very much for you help!

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 😀