How to open multiple SharePoint Modal Popup Dialog With HTML option

Question

I found the following script on your site. I discovered that I can only use the script once on a page. How can I have 6 links that each will open a different modal pop-up dialog with an HTML option?

Additional questions Can I format the links as buttons? If yes, how?

<script>

    function openDialog() {
        var divElement = document.createElement('div');
            divElement.innerHTML = 'enter your content here';

        var options = {
            html: divElement,
            title: 'Yout title',
            allowMaximize: false,
            showClose: true,
            width: 300,
            height: 100
        };
        SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
    }
</script>

<a href="#" onclick="openDialog();">Click Here</a>

Thanks

Answer 1

Open multiple SharePoint Modal Popup Dialog With HTML option

I think you can easily implement multiple SharePoint Modal Popup Dialog by passing a parameter in openDialog(); function as the following:

<a href="#" onclick="openDialog('option1');">Click Here</a>

<script>
   
    function openDialog(option) {
    var divElement;
   if(option == 'option1' ) {
        divElement = document.createElement('div');
            divElement.innerHTML = 'enter your content here';
    } else if (option == 'option1')
          {
              // add you second HTML code here, etc.
          divElement = document.createElement('div');
            divElement.innerHTML = 'enter your content here';
          }

        var options = {
            html: divElement,
            title: 'Yout title',
            allowMaximize: false,
            showClose: true,
            width: 300,
            height: 100
        };
        SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
    }
</script>

Regarding your second question, yes, you can use a button instead of a link using the below input tag

<input type="button" onclick="openDialog();" value="Click Here">

---

For more details, Please check

• Open link in Modal Dialog SharePoint
• Show HTML in SharePoint Popup Dialog

Comments

Hi Mohamed,
I ended up using your instructions about using pages for the modal content source (https://spgeeks.devoworx.com/open-link-via-modal-dialog-sharepoint/). I determined that pages would be easier for others to update the modal content. Using links as the trigger provided flexibility I needed. Thanks for providing such clear instructions.

---

You're welcome and glad to hear it helped you!