Search code examples
office365sharepoint-online

Popup for Share Point Online (2023)

I am new to SharePoint and I need help creating a popup that opens after clicking a button. (I have to display a few announcements for my co-workers on a pop up)

I use the latest Version of SharePoint in my Browser, can some one help me? (/Is this even possible without any Apps like Power Popups)

Thank you!

I have searched on Microsoft's website and read many tickets on Microsoft Support regarding the topic. I have also informed myself through YouTube, but I have not find a helping answer.

Solution

  • According to my research and testing, you can follow these steps to create Modal Dialog Pop Up In SharePoint Online:

    1.Create a new Wiki page. enter image description here

    2.Click Inset ->> Web Part ->> Media and Content ->> Script Editor ->> Click Add enter image description here

    3.Click Edit Web Part ->> Click EDIT SNIPPET

    enter image description here

    4.Input the code in the attachment, then click Inset and OK.

    <button onclick="showModalPopUp();" type="button">Click me​</button>
<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
<script language="javascript" type="text/javascript">  

    function showModalPopUp() {  
        //Set options for Modal PopUp  
        var options = {  
            url: '/sites/xxx/Lists/List_test2', //Set the url of the page  
            title: 'SharePoint Modal Pop Up', //Set the title for the pop up  
            allowMaximize: false,  
            showClose: true,  
            width: 600,  
            height: 400  
        };  
        //Invoke the modal dialog by passing in the options array variable  
        SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);  
        return false;  
    }  
</script>

    Output: enter image description here