0

I found a solution to popup modals from this question and implemented this code:

<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">  
$(document).ready(function() {  
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', showModalPopUp);  
});  

function showModalPopUp() {  
    //Set options for Modal PopUp  
    var options = {  
        url: 'url', //Set the url of the page  
        title: 'Special Access Required', //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>  

I know this section of code is what is causing the Modal to popup when someone lands on the page (which is really cool):

SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);  
return false;  

But I would like to make this modal popup when someone clicks on a link within this page instead of popping up when someone lands.

This code is implemented currently the same way as it was described in this link here.

How do I make it so that when someone clicks a link on some text within my page it'll have this modal pop up?

Edit: any JS that I put on the page that isn't Embed or in a CEWP or SEWP gets removed and so putting the "onclick" link on the text itself isn't working despite the JS being implemented on the page via a link to the document in the Site Assets folder.

0

If the link element has an ID (for example: <a href="https://..." id="myLinkId">My Link</a>), then you can do the following (without even using jQuery):

<script type="text/javascript">
  function showModalPopUp() {
    //Set options for Modal PopUp  
    var options = {
      url: 'https://share.amazon.com/sites/NHOPlaybook/Shared%20Documents/Access%20Documents%20Message.PNG', //Set the url of the page
      title: 'Special Access Required', //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);
  }

  function onDOMLoaded() {
    var linkElementId = 'myLinkId';
    var linkElement = document.getElementById(linkElementId);

    if (linkElement) {
      // Add click event listener to the link element.
      linkElement.addEventListener('click', showModalPopUp);
    } else {
      alert('A link element with the ' + linkElementId + ' id could not be found!');
    }
  }

  document.addEventListener('DOMContentLoaded', onDOMLoaded);
</script>

If the link does not have an id, you can add one if you have access to modify the HTML of the link.

|improve this answer|||||
  • That did it! I don't know why I didn't think about giving it an ID so I can just reference back to it without using a web part. Thank you sir! – user87826 Jan 9 at 18:41
  • Would you happen to know why I can't apply this ID to other text for multiple links, as in, use the same "myLinkId" more than once on other text on the page? – user87826 Jan 9 at 18:57
  • That because an ID is unique for each HTML element. You may want to use the class attribute instead and then query all elements using that class and add the same event listener to all of them. – Mihail-Florin Popa Jan 9 at 19:07
  • Cool, got it. Thank you very much for your help! – user87826 Jan 9 at 19:50
0

You can use jquery for all link with a tag

 $(document).ready(function(){
     $(document).on("click", "a", function(){
         showModalPopUp();
      });
 });

or you can apply a class for more than one link and use it in your event

<a href="https://..." class="clickable">Link 1</a>
<a href="https://..." class="clickable">Link 2</a>
<a href="https://..." class="clickable">Link 3</a>

 $(document).ready(function(){
    $(document).on("click", "clickable", function(){
        showModalPopUp();
    });
  });
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.