Scrollable Modal Popup?

More
11 months 6 days 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 to join the conversation.

More
11 months 6 days ago #188487 by gabrieljenik
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 .

Please Log in to join the conversation.

More
11 months 6 days 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 . I don't answer to private message.

Please Log in to join the conversation.

More
11 months 6 days 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 to join the conversation.

More
11 months 6 days 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 . I don't answer to private message.

Please Log in to join the conversation.

More
11 months 6 days 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.

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 .

Please Log in to join the conversation.

More
11 months 6 days 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, ymca

Please Log in to join the conversation.

More
11 months 6 days 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 . I don't answer to private message.

Please Log in to join the conversation.

More
11 months 5 days 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 to join the conversation.

More
3 months 1 week ago - 3 months 1 week 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.
Anarchism <button class="btn btn-default btn-sm" data-target="#myModal" data-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-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-dismiss="modal" type="button">Close</button></div> </div> </div> </div>
 
Secularism <button class="btn btn-default btn-sm" data-target="#myModal" data-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-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-dismiss="modal" type="button">Close</button></div> </div> </div> </div>

LS Version 4.2+
Last edit: 3 months 1 week ago by ymca.

Please Log in to join the conversation.

More
3 months 1 week ago - 3 months 1 week 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: 3 months 1 week ago by Joffm.

Please Log in to join the conversation.

More
3 months 1 week 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.
Anarchism <button class="btn btn-default btn-sm" data-target="#myModal" data-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-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-dismiss="modal" type="button">Close</button></div>
</div>
</div>
</div>

LS Version 4.2+

Please Log in to join the conversation.

More
3 months 1 week 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
myModal
codes:
First button
myModal1
Second button
myModal2
And so on...

And now it works. B)
Thanks.
Anarchism <button class="btn btn-default btn-sm" data-target="#myModal1" data-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-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-dismiss="modal" type="button">Close</button></div>
</div>
</div>
</div>
 
Atheism <button class="btn btn-default btn-sm" data-target="#myModal2" data-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-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-dismiss="modal" type="button">Close</button></div>
</div>
</div>
</div>

LS Version 4.2+

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now