UI page

[Syed Ibrahim Hu]

Hi All,

I'm calling a ui page using GlideModal in another UI page, after close of second ui page, first one is not scrollable.

Someone please help me resolve this. Thanks!

[Juhi Poddar]

Hello @Syed Ibrahim Hu .

• This issue occurs because modals often disable page scrolling by adding a class (e.g., modal-open) or setting overflow: hidden on the body.
• To fix this, ensure scrolling is re-enabled by removing these restrictions when the modal is closed.

I have tried to replicate your query by creating two UI page(first_ui_page & second_ui_page) and called the send page from first page.

Script first_ui_page:

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null"> 
    <script type="text/javascript">
        function openSecondModal() {
            var secondModal = new GlideModal("second_ui_page"); // Call the second UI page
            secondModal.setTitle("Second Modal");
            
            // Re-enable scrolling when the second modal is closed
            secondModal.on('close', function() {
                document.body.style.overflow = 'auto';
                document.body.classList.remove('modal-open');
            });
            
            secondModal.render();
        }
    </script>
    <style>
        .scrollable-content {
            height: 200px;
            overflow-y: scroll;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
    
    <div class="scrollable-content">
        <h1>First UI Page</h1>
        <p>This is the first UI page with some scrollable content. Scroll to see if the page remains scrollable after closing the second modal.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas urna non urna pulvinar, sit amet volutpat lectus pharetra.</p>
        <p>...</p> <!-- Add more paragraphs to enable scrolling -->
        <button onclick="openSecondModal()">Open Second Modal</button>
    </div>

</j:jelly> 

Script second_ui_page:

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null"> 
    <div>
        <h2>Second UI Page</h2>
        <p>This is the second modal dialog. Close this modal and verify that the first page is still scrollable.</p>
    </div>

</j:jelly> 

From the first page you can find the code that helps to re enable the scrolling after the second page is closed.

Hope this helps!

"If you found my answer helpful, please like and mark it as an "accepted solution". It helps future readers to locate the solution easily and supports the community!"

Thank You
Juhi Poddar

[Syed Ibrahim Hu]

Hi @Juhi Poddar , 

Thank you for responding. Unfortunately this is not working for me. 

[Juhi Poddar]

Hi @Syed Ibrahim Hu 

If possible please share the script to help you further.