Is there a way to create an overlay page in SPO?

Sehar Shahzad 21 Reputation points
2022-12-07T10:26:23.23+00:00

Is it possible to design a page that overlays another page using a web part?

I would like to create a page similar to what SPO offers when clicking on Page Analytics.

Would appreciate assistance from anyone.

Thank you.

268170-image.png

SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
2,657 questions
{count} votes

Accepted answer
  1. RaytheonXie_MSFT 30,906 Reputation points Microsoft Vendor
    2022-12-08T07:03:11.637+00:00

    Hi @Sehar Shahzad
    Per my test, you can create a Modal Popup in spfx and display the page in modal.
    You can refer to the following code to create a modal popup
    https://www.c-sharpcorner.com/article/modal-popup-in-spfx/

    Then you can display the page in the modal by following code

    <div class="modal-content"><span class="close">&times;</span><iframe height="100%" src="url" width="100%"></iframe></div>  
    

    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



2 additional answers

Sort by: Most helpful
  1. Sehar Shahzad 21 Reputation points
    2022-12-12T08:10:36.097+00:00

    Dear @RaytheonXie_MSFT .
    Thank you for your proposed solution. Really appreciate. I will try to test the solution this week. In case have any question, will revert.

    Best,


  2. Sehar Shahzad 21 Reputation points
    2022-12-15T08:14:42.477+00:00

    Thank you @RaytheonXie_MSFT for checking on it. The solution worked for me. In case would need more assistance, will get back to you. Thank you once again.