Using JavaScript to Activate A Modal | XM Community
Solved

Using JavaScript to Activate A Modal

  • 14 September 2019
  • 8 replies
  • 167 views
W
Hello,

I am trying to implement some JavaScript code so that when participants click on a button, a modal with some text pops up. Specifically, I am trying to implement this example: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_js&stacked=h

I am somewhat familiar with JavaScript and HTML. I was able to implement everything so that the button is on the page and the modal opens when the button is clicked. However, when the modal opens, the entire screen is darkened by the overlay and everything is unresponsive to clicking -- so there is no way to close the modal or even click the button to progress to the next screen. Screenshots of the issue are below. I have tried tinkering with the overlay options for the modal and this doesn't change anything... I am stumped and was wondering if anyone knows what could be causing the issue?

Specifics:
-- I am using the exact code as in the example link above.
-- I put the header code in "Look & Feel" -> "header".
-- I put the JavaScript code in Qualtrics.SurveyEngine.addOnReady(function() {});
-- I put the HTML in the question text.


Question before clicking:
!


After opening modal:
!


Any advice would be greatly appreciated. Thanks in advance!
icon

Best answer by TomG 16 September 2019, 17:22

View original

8 replies

TomG
Rank
Userlevel 7
Badge +27
Try using jQuery Modal instead.

P.S. Using the "exact" code from another site in Qualtrics usually isn't a good idea. For example, Qualtrics already loads jQuery so you don't need to do it a second time and you need to spell out jQuery instead of using a $.
W
Thanks Tom!

I was able to get jQuery Modal working.

Yea, I figured I shouldn't use the exact code from another site. I am just pretty new to Qualtrics and I am used to coding up webpages from scratch, so it has never been an issue in the past. Is there any good documentation of what Qualtrics is doing in the background? Especially pertaining to JavaScript. For example, I didn't know that it was already loading jQuery and that you shouldn't use $.
TomG
Rank
Userlevel 7
Badge +27
> @wmurdock said:
> Is there any good documentation of what Qualtrics is doing in the background?
Not that I know of.
W
okay. Thanks anyways!
W
So now that I am extensively testing my survey, it looks like there is a slight issue. The modal works completely fine when I do "Preview Question" in the survey editor. However, whenever I preview the whole survey or publish the survey, the modal behaves slightly differently. Specifically, the close buttons do not work. I can still close the modal by clicking outside of it on the grey overlay... but I obviously don't want to confuse participants with an unresponsive close button. Any suggestions on what could be going wrong?

The specific code being used in the survey page is:
!


I've added the reference to the needed javascript into the Look&Feel header. And I have also added some custom CSS into Look&Feel to make the buttons look a bit prettier (but I don't think this is causing the issue).

I am not sure if it matters, but this question is one of three that are shown on the given survey page.

The survey is due 24 hours from now. So any advice would be greatly appreciated. Thanks!
TomG
Rank
Userlevel 7
Badge +27
Not sure what the problem is, but...

1. Your link to the jquery modal css should be at the top of the Look & Feel header instead of in the question.
2. Set transition to 'none' in Look & Feel. Transition can have timing effects that impact other JavaScript (e.g., jquery-modal)
3. Check the console to see if any errors are being thrown, and if possible take appropriate action.
4. It the first three things don't help or you can't address errors in (3), consider using JavaScript instead of a link to set up the modal. That should give you more control and allow you to debug if needed.
W
Hi Tom,

Thank you so much for your quick response! I have implemented your first two suggestions and the error is still present.

While investigating in the console, I found that the following error is being thrown whenever I click on the close buttons:
!

This is a little outside of my limited knowledge of javascript. Do you have any suggestion on how to fix the error?

Similarly, for your fourth suggestion, do you just mean to implement something similar to the first post I made? But reference the div with the jquery-modal? I.e., include something like the below code in the javascript for the question (but using the appropriate IDs):

jQuery(document).ready(function(){
jQuery("#myBtn").click(function(){
jQuery("#myModal").modal();
});
});

Thanks again,
William
TomG
Rank
Userlevel 7
Badge +27
> @wmurdock said:
> Hi Tom,
>
> Thank you so much for your quick response! I have implemented your first two suggestions and the error is still present.
>
> While investigating in the console, I found that the following error is being thrown whenever I click on the close buttons:
> !
>
> This is a little outside of my limited knowledge of javascript. Do you have any suggestion on how to fix the error?
>
> Similarly, for your fourth suggestion, do you just mean to implement something similar to the first post I made? But reference the div with the jquery-modal? I.e., include something like the below code in the javascript for the question (but using the appropriate IDs):
>
> jQuery(document).ready(function(){
> jQuery("#myBtn").click(function(){
> jQuery("#myModal").modal();
> });
> });
>
> Thanks again,
> William

One more idea to try first...change the value of the href attribute on your close link from "#ex1" to "#".

If that doesn't work, yes I mean add JS to the question to invoke modal...I'm not sure if the code you provided is correct, but you have the general idea.

Leave a Reply


Terms & Conditions