Open modal dialog using javascript stripped from code

Question

Sorry for the Newbie question, but I don't see a relevant answer in searching.

I have a SP Online site with a sub-site for Human Resources (HR). I created a custom list for employee feedback for them. It's a very simple list with only 2 fields, EmpName (single line text) and EmpComment (multi-line text). I user PowerApps to create separate forms for Display, Edit and Create. I modified the Create form so it only shows the 2 relevant fields while hiding the other information (such as create date, modify date, etc.) I saved and published the PowerApp forms and it works fine as a (normal) callout process.

For privacy concerns, we don't want the (non-HR) employees accessing the entire list. I have a new page for this test site and I added a Content Editor web part, then edited the Source Code to call a javascript function like so:

<a onclick="javascript:SP.UI.ModalDialog.showModalDialog("http://HR/Lists/Feedback/NewItem.aspx");return false;" href="">Leave New Feedback</a>

I swear this used to work in previous versions, but now SP strips out the relevant markup -- the error is "Warning: Some of your markup was stripped out. Try using the Embed command." So I edited the page again and tried to embed the link, but it still gets stripped. I'm sure there is a simple explanation, but (frankly) my sharepoint is a little rusty.

How can I get this entry form to pop-up as a modal dialog from a link on the page?

Thanks, Glenn

Answer 1

Try placing the modal in a separate function in JS and call that function onclick. Give this a try instead:

EDIT for CEWP use a txt file and reference it in the CEWP. Store your txt file in the Site Assets Library. Give this a try:

<script type="text/javascript" src="https://yoursite/SiteAssets/jquery-1.xx.x.js"></script>

<a href="#" onclick="javascript:showModal()">Leave Feedback</a>

<script type="text/javascript">
    $(function() {
        showModal() {
            var options = {
                url: "http://HR/Lists/Feedback/NewItem.aspx",
                allowMaxSize: true,
                showClose: true
            };
            SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
            return true; //you want the PostBack after Save
        }
    });
</script>

This is what I use for Modal Dialogs on my pages.