Modal Does not open in full screen

  • Resolved pgdev

    (@pgdev)


    1 year, 6 months ago

    Hi All, I’m trying to show a modal in above page(link). I inserted custom html, css, js through default page builder ‘code block’ element. As you can see, In the Pink background slider section, When user clicks on +more info button below card named ‘Vending’, a modal with black translucent background should open full screen size with the content instead it is opening within the div area only, also it doesn’t appear on front. I think some different css is affecting it from working.

    Images for reference.
    https://prnt.sc/yo8tqKn0o5kj
    https://prnt.sc/NJBXd1a0QfUF

    Below is my custom code: 

    <div id="myModal" class="modal-container" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); /* black translucent background */ z-index: 9999;">

<!-- Modal content -->
<div class="modal-content" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);"><span id="closeModal" class="close-button" style="position: absolute; top: 10px; right: 10px; cursor: pointer;">×</span>
<img style="width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px;" src="https://latpay.com/wp-content/uploads/2023/08/Mask-Group-9.png" alt="Avatar" />
<h4 style="margin-top: 10px;"><b>Jane Doe</b></h4>
Interior Designer

</div>
</div>
<script>
  // Get references to the modal and close button
  var modal = document.getElementById('myModal');
  var closeModalButton = document.getElementById('closeModal');
  var openModalButton = document.getElementById('openModalButton');

  // Open the modal when the open button is clicked
  openModalButton.addEventListener('click', function() {
    modal.style.display = 'block';
  });

  // Close the modal when the close button is clicked
  closeModalButton.addEventListener('click', function() {
    modal.style.display = 'none';
  });
</script>

    and the id ‘openModalButton’ is called with ‘+ more info’ button.

    Please suggest me what’s the fix. I have been stuck. I’m new to wordpress, can’t able to figure out. Any help would be appreciated.


    Thanks
    Pgdev

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    Move you modal’s HTML outside of the various containers that is currently constraining it. Full screen modal HTML is best placed as an immediate child of the body tag. How to do so depends on your theme. If all else fails the HTML could be injected into the DOM via enqueued JavaScript.

    Thread Starter pgdev

    (@pgdev)

    Hi. Apologies for late reply, got carried away by other tasks. As you said, I placed the modal HTML as the immediate child of body tag. Now the modal appears full screen but is still behind the section/page even after applying Z-index to appear front. Please have a look on the URL once more and suggest me how can I solve that. Thanks.

    Moderator bcworkz

    (@bcworkz)

    It looks like there should be a script that causes the modal to be visible, but it might be failing due to a number of console script errors on the page. The ones related to jQuery $ being not defined or not a function are because WP jQuery runs in noConflict mode. You either need to replace $ usage with jQuery or use a noConflict wrapper as described in the user contributed note by Andrei Surdu on the wp_enqueue_script() doc page. Direct linking doesn’t work well on this page, search the page content for “Andrei Surdu” to find the right note.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Modal Does not open in full screen’ is closed to new replies.