Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #752381

    Hello!
    I tried a lot of ways to get a popup or modal to work, with and without js, but everytime I click on the link that is supposed to open the modal, the page only scrolls up and nothing happens.

    This is one of the alternatives I was trying out:

    <style type="text/css">#overlay {
         visibility: hidden;
         position: absolute;
         left: 0px;
         top: 0px;
         width:100%;
         height:100%;
         text-align:center;
         z-index: 1000;
         background-color:rgba(0,0,0,0.8)
    }
    #overlay div {
         width:300px;
         margin: 100px auto;
         background-color: #fff;
         border:1px solid #000;
         padding:15px;
         text-align:center;
    }</style>
    <script type="text/javascript">function overlay() {
    	el = document.getElementById("overlay");
    	el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
    }</script>
    
    <a href='#' onclick='overlay()'>Click here to show the overlay</a>
    
    <div id="overlay">
         <div>
              <p>Content you want the user to see goes here.</p>
         </div>
    </div>

    Since I tried various methods, for example with pure css and ::target, I figured that it’s maybe not the code, but something I am doing wrong so the code won’t work well with the theme.Do you know why the modals don’t work? I do not want to use any form of plugin to make a modal, because that really should not be necessary for this normally easy task.
    Any hint appreciated. Thank you very much!

    Kind regards

    #754141

    Hey Marc2104,

    Apologies for the late reply.

    Are you seeing any console errors? Please provide a link to the page/site in question so that we can look into this further.

    Best regards,
    Jordan Shannon

    #754461

    Thank you for your reply!
    It seems, maybe due to the theme update, that the modal now does open onclick.
    However I am still having some issues with pure css modal (::target), where the link that should open the modal does not react.
    And in general the modal overlay does not span over the full width and height of the viewport, even if I choose 100vw/100vh and z-index:1000 (I am guessing that a parent element has set overflow to hidden and I am not sure if it would be wise to change that?).
    Before I give you a link to the page, I would want to try and solve the problem myself a bit (or in other words prepare the testpage and run a few tests myself since I am not expecting you to do everything :) ), but I will not be able to do that today and I am not available next week- so I can only tell you if there are still issues the week after that. Please don’t close this topic until then if possible, since it is possible that I might be unable to resolve the issue myself and will provide a testpage with the modal by march 13.

    thank you!

    #754566

    Hi,

    If you are trying to make the lightbox window fulscreen please refer to this post https://kriesi.at/support/topic/add-horizontal-scrollbar-to-custom-template/#post-745120

    Best regards,
    Vinay

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.