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 $.
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 $.
>
@wmurdock said:
> Is there any good documentation of what Qualtrics is doing in the background?
Not that I know of.
okay. Thanks anyways!
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!
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.
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
>
@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.
