Hi community,

I created a popup box at the welcome page with this website: html-online.com/articles/simple-popup-box/
When you click on "Kontakt", the popup box opens but it is not aligned in the center, see screenshot.
Can someone please help me with the background of the popup box? It would be fine if the background would go over the whole screen (by staying responsive for mobile devices). Or the background would be centered. I guess it is a something with css?
This is the css class that is responsible for the background of the popup box:



Here is a test link: food-boku.limequery.com/296662?lang=de

LS uses Bootstrap so have a look at Bootstrap Modal - getbootstrap.com/docs/4.0/components/modal/

Thank you, this looks fine.
P.S.: With "large modal", the width of the text box can be increased. Very partical.

Try adding something like this to your theme custom.css file for even more fluid sizing:

Sorry, I changed my last post because there is actual a modal for increased width on this page
getbootstrap.com/docs/4.0/components/modal/#large-modal

Earlier on, I just didn't look on the whole page. Thanks, I will test your solution as well.

LimeSurvey use bootsrap 3, not bootsrap 4.

Unsure modal have diferences, but getbootstrap.com/docs/3.3/javascript/#modals

Else, ls already have boostrap modal :
github.com/LimeSurvey/LimeSurvey/blob/ma...alert_modal.twig#L27

I'm not sure what your point is.

tpartner wrote: I'm not sure what your point is.

There are some difference in bootsrap 3 and bootsrap 4 , better to put the link to bootsrap 3 for LimeSurvey

Thank you for clarification.

There ist just a last positioning thing on my welcome page: I tried to move the button down to the same height of the "next"/"start" button. Is it not allowed to use the classes without the "#question{QID}" in javascript?

Given an ID of "myInsertedButtonID" for your inserted button, something like this will move the button down into the navigator container:

KompetenzZ wrote: $('#row.navigator.space-col').each(function(i) {
$('#btn.btn-primary.pull-left').before($(this));

Here, you search the elemnt with id row and class navigator + space-col : its don't exist.

See : learn.jquery.com/using-jquery-core/selecting-elements/

Thank you for the javascript. This works well. Great, with this link it's easier to understand identifying elements with javascript.

Hi,

I discovered that when the modal-button is opened on a small screen width, the modal-dialog is shifted down to the bottom of the page, outside of the screen. I also tried to center the modal-dialog with getbootstrap.com/docs/4.0/components/modal/#vertically-centered but it has no effect. I think this problem has to do with my custumized theme, because there isn't this problem with the standard shipped themes.
When I change in theme options "bootswatch theme" to another theme than spacelab, it works. But I would like to use my current bootswatch theme "spacelab".

Do you have any idea how to vertical align the modal-dialog to the top?


Here is a test survey with the problem in spacelab:
food-boku.limequery.com/519354?lang=de


If necessary, here is my theme and survey.


LS Version: 3.14

Try adding something like this to custom.css:

Thank you for the quick response. The only problem left now is that I cannot scroll down (on smartphone) until the end of the modal-dialog. I mean the scroll function is disabled now.