Scrollable Modal Popup?

More
1 month 2 weeks ago #188484 by blocka
I'm building a survey that solicits feedback on an application prototype. I want have the participant click a link in a Text Display type question, and open the prototype (a remote URL) and navigate through screens. Then, they can close the modal, and proceed to the next set of questions about their experience using the prototype.

Can someone provide a working example of how I can accomplish this?

LS version 3.17.15, build 190903

Please Log in or Create an account to join the conversation.

LimeSurvey Partners
More
1 month 2 weeks ago #188487 by gabrieljenik
I think the easiest is to integrate some JS library like sweetAlert2.

Cheers,
Gabriel - www.Encuesta.Biz - Authorized Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Assistance on LimeSurvey forum and LimeSurvey core developpement are on my free time (Say thanks ?)....[img]

Please Log in or Create an account to join the conversation.

More
1 month 2 weeks ago #188491 by DenisChenu
Replied by DenisChenu on topic Scrollable Modal Popup?

gabrieljenik wrote: I think the easiest is to integrate some JS library like sweetAlert2.

Why ?

We already have boostrap dialog : some JS to add a iframe in it and it's OK.

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in or Create an account to join the conversation.

More
1 month 2 weeks ago #188493 by blocka
Replied by blocka on topic Scrollable Modal Popup?
Any chance of an example of how to implement this?

Please Log in or Create an account to join the conversation.

More
1 month 2 weeks ago #188494 by DenisChenu
Replied by DenisChenu on topic Scrollable Modal Popup?

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in or Create an account to join the conversation.

More
1 month 2 weeks ago #188497 by gabrieljenik
You are right. But sometimes a jslib is easier for implementing. They have tons of examples and also triggers on user actions.

Cheers,
Gabriel - www.Encuesta.Biz - Authorized Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Assistance on LimeSurvey forum and LimeSurvey core developpement are on my free time (Say thanks ?)....[img]

Please Log in or Create an account to join the conversation.

More
1 month 2 weeks ago #188501 by Joffm
Replied by Joffm on topic Scrollable Modal Popup?
Hi, blocka,
here examples for the accordion and the dialog.



File Attachment:

File Name: limesurvey...9318.lss
File Size:43 KB


I only included the examples of bootstrap into Limesurvey. And in the dialog the " www.getbootstrap.com " is opened.
The rest - styling, etc. is up to you.


Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
The following user(s) said Thank You: DenisChenu

Please Log in or Create an account to join the conversation.

More
1 month 1 week ago #188511 by DenisChenu
Replied by DenisChenu on topic Scrollable Modal Popup?
Joffm is the king ! \o/ :kiss:

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in or Create an account to join the conversation.

More
1 month 1 week ago #188536 by blocka
Replied by blocka on topic Scrollable Modal Popup?
Thanks for all the help, I used the following to get my modal window with iframe content embedded. Style redefines the modal width to 95% of viewing area, and in iframe, I set width to 100%... Works nicely!
<style>
.modal-lg {
    width: 95%;
}
</style>
 
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">View Prototype</button>
 
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <iframe src="https://www.example.com" height="800px" width="100%"></iframe>
    </div>
  </div>
</div>
 

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!