Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Scrollable Modal Popup?

More
7 years 1 month ago #188484 by blocka
Scrollable Modal Popup? was created 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
The topic has been locked.
Partner Banner
More
7 years 1 month ago #188487 by gabrieljenik
Replied by gabrieljenik on topic Scrollable Modal Popup?
I think the easiest is to integrate some JS library like sweetAlert2.
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Checkout our Reporting Solutions and our plugin shop at www.encuesta.biz .

[img
The topic has been locked.
More
7 years 1 month 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 support - Plugins, theme and development .
I don't answer to private message.
The topic has been locked.
More
7 years 1 month ago #188493 by blocka
Replied by blocka on topic Scrollable Modal Popup?
Any chance of an example of how to implement this?
The topic has been locked.
More
7 years 1 month ago #188494 by DenisChenu
Replied by DenisChenu on topic Scrollable Modal Popup?
Not related to LimeSurvey : www.bootply.com/61676 for example

getbootstrap.com/docs/3.4/javascript/#modals
and
stackoverflow.com/a/25565859/2239406

etc …
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.
The topic has been locked.
More
7 years 1 month ago #188497 by gabrieljenik
Replied by gabrieljenik on topic Scrollable Modal Popup?
You are right. But sometimes a jslib is easier for implementing. They have tons of examples and also triggers on user actions.
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Checkout our Reporting Solutions and our plugin shop at www.encuesta.biz .

[img
The topic has been locked.
More
7 years 1 month 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:42.95 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
The following user(s) said Thank You: DenisChenu, ymca
The topic has been locked.
More
7 years 4 weeks 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 support - Plugins, theme and development .
I don't answer to private message.
The topic has been locked.
More
7 years 4 weeks 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!
Code:
<style> .modal-lg { width: 95%; } </style> <!-- Large modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-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>
The topic has been locked.
More
6 years 5 months ago - 6 years 5 months ago #198411 by ymca
Replied by ymca on topic Scrollable Modal Popup?
Hi,

Cool idea.
Also works on 4.2.1 and also in answers, but with one problem.

If there are more than 1 button, then it will show only the link of the first button.
Have tried one in each answer and also both in the help area.
Code:
Anarchism <button class="btn btn-default btn-sm" data-bs-target="#myModal" data-bs-toggle="modal" type="button">What's that?</button> <div aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"><button aria-label="Close" class="close" data-bs-dismiss="modal" type="button"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"><iframe frameborder="1" height="360" src="https://en.wikipedia.org/wiki/Anarchism" style="zoom:0.60" width="99.6%"></iframe></div> <div class="modal-footer"><button class="btn btn-default" data-bs-dismiss="modal" type="button">Close</button></div> </div> </div> </div> Secularism <button class="btn btn-default btn-sm" data-bs-target="#myModal" data-bs-toggle="modal" type="button">What's that?</button> <div aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"><button aria-label="Close" class="close" data-bs-dismiss="modal" type="button"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"><iframe frameborder="1" height="360" src="https://en.wikipedia.org/wiki/Secularism" style="zoom:0.60" width="99.6%"></iframe></div> <div class="modal-footer"><button class="btn btn-default" data-bs-dismiss="modal" type="button">Close</button></div> </div> </div> </div>
LS Version 4.2+
Last edit: 6 years 5 months ago by ymca.
The topic has been locked.
More
6 years 5 months ago - 6 years 5 months ago #198413 by Joffm
Replied by Joffm on topic Scrollable Modal Popup?
Of both have the same target? Yes.

BTW: You should set the correct type when using the code /code tag.
code type=javascript
code type=css
code type=php
code type=html

You see that your script is not readable.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 6 years 5 months ago by Joffm.
The topic has been locked.
More
6 years 5 months ago #198415 by ymca
Replied by ymca on topic Scrollable Modal Popup?
Cool.

BTW: You should set the correct type when using the code /code tag.

Nice.

At first I thought you meant the link of wikipedia, but then was looking again and saw the same "#myModal" at both buttons codes.
I have changed the target from "#myModal" to "#myModal1" and the second to "#myModal2", but it didn't work.

This is the example code from the survey file you attached with a wiki link.
Code:
Anarchism <button class="btn btn-default btn-sm" data-bs-target="#myModal" data-bs-toggle="modal" type="button">What's that?</button> <div aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"><button aria-label="Close" class="close" data-bs-dismiss="modal" type="button"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"><iframe frameborder="1" height="360" src="https://en.wikipedia.org/wiki/Anarchism" style="zoom:0.60" width="99.6%"></iframe></div> <div class="modal-footer"><button class="btn btn-default" data-bs-dismiss="modal" type="button">Close</button></div> </div> </div> </div>
LS Version 4.2+
The topic has been locked.
More
6 years 5 months ago #198458 by ymca
Replied by ymca on topic Scrollable Modal Popup?
My first mistake was "not posting the whole code here. I think there was some mix up with the original code with the changes I made, so I started again and copied the original code.

After that I've made changes only to all the
Code:
myModal
codes:
First button
Code:
myModal1
Second button
Code:
myModal2
And so on...

And now it works. B)
Thanks.
Code:
Anarchism <button class="btn btn-default btn-sm" data-bs-target="#myModal1" data-bs-toggle="modal" type="button">What's that?</button> <div aria-labelledby="myModalLabel" class="modal fade" id="myModal1" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"><button aria-label="Close" class="close" data-bs-dismiss="modal" type="button"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"><iframe frameborder="1" height="360" src="https://en.wikipedia.org/wiki/Anarchism" style="zoom:0.60" width="99.6%"></iframe></div> <div class="modal-footer"><button class="btn btn-default" data-bs-dismiss="modal" type="button">Close</button></div> </div> </div> </div> Atheism <button class="btn btn-default btn-sm" data-bs-target="#myModal2" data-bs-toggle="modal" type="button">What's that?</button> <div aria-labelledby="myModalLabel" class="modal fade" id="myModal2" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"><button aria-label="Close" class="close" data-bs-dismiss="modal" type="button"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"><iframe frameborder="1" height="360" src="https://en.wikipedia.org/wiki/Atheism" style="zoom:0.60" width="99.6%"></iframe></div> <div class="modal-footer"><button class="btn btn-default" data-bs-dismiss="modal" type="button">Close</button></div> </div> </div> </div>
LS Version 4.2+
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source