How to make a Modal popup when someone clicks a link on my page

Question

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.

Answer 1

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.

Answer 2

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();
    });
  });