Modal dialog from picture

Question

This is the updated code as per a previous reply although this doesn't appear to be working. Please advise - do I need to add any jQuery files to the site? See the updated code below.

I have some image links where one of them needs to load the linked page in a modal dialog box. I'm struggling to get this work whilst keeping the styling intact.

There is a line of code that I need to open in javascript modal window:

<a href="/EARL/CompanySecretary" class="ks-promo ks-promo--pink">

Would appreciate some help with this.

<div class="ks-promos">
    <a href="javascript:void(0)" class="ks-promo ks-promo--pink" linkto="http://sps-2013-04/EARL/CompanySecretary">
    <h2 class="ks-promo__title">Board & committee records</h2>
    <div class="ks-promo__icon">
        <svg version="1.1" class="icon icon--file" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 40 48" enable-background="new 0 0 40 48" xml:space="preserve">
            <g>
                <rect x="8" y="11" width="16" height="2"/>
                <rect x="8" y="16" width="24" height="2"/>
                <rect x="8" y="21" width="24" height="2"/>
                <rect x="8" y="26" width="24" height="2"/>
                <rect x="8" y="31" width="24" height="2"/>
                <rect x="8" y="36" width="24" height="2"/>
                <path d="M39.7,11.3l-11-11C28.5,0.1,28.3,0,28,0H3C1.3,0,0,1.3,0,3v42c0,1.7,1.3,3,3,3h34c1.7,0,3-1.3,3-3V12
                    C40,11.7,39.9,11.5,39.7,11.3z M38,45c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h24v7.6c0,1.9,1.5,3.4,3.4,3.4H38V45z"
                    />
            </g>
        </svg>
    </div>
    <svg version="1.1" class="icon icon--arrow--right" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 30.8 30.9" enable-background="new 0 0 30.8 30.9" xml:space="preserve">
        <g>
            <defs>
                <rect id="SVGID_1_5" y="0" width="30.8" height="30.9"/>
            </defs>
            <clipPath id="SVGID_2_5">
                <use xlink:href="#SVGID_1_5"  overflow="visible"/>
            </clipPath>
            <path clip-path="url(#SVGID_2_5)" d="M29.9,13.4c0,0-0.1-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1l-12-12.3
                c-1.2-1.2-3.1-1.2-4.2,0c-1.2,1.2-1.2,3.1,0,4.2l7,7.2H3c-1.7,0-3,1.3-3,3c0,1.7,1.3,3,3,3h17.8l-7.5,7.5c-1.2,1.2-1.2,3.1,0,4.2
                c0.6,0.6,1.4,0.9,2.1,0.9c0.8,0,1.5-0.3,2.1-0.9l12.4-12.4C31.1,16.5,31.1,14.6,29.9,13.4"/>
        </g>
    </svg>
    <div class="ks-promo__hover">
        <p>If you’d like a record from here, please see the company secretary for details.</p>
    </div>
</a>
</div>
<link rel="stylesheet" type="text/css" href="http://sps-2013-01/EARL/SiteAssets/nosharebuttons.css"></link>
<style type="text/css">  

a[id$=site_share_button], a[id$=SyncPromotedAction], a#site_follow_button  
{  
    display: none !important;  
}  

</style>
<style>
   Span#fullscreenmodebox
   {
       display:none;
   }
</style>
<script>
  $(document).ready(function() {
$(".ks-promo.ks-promo--pink").click(function() {
    var myUrl = $(this).attr("linkto");
    var options = {
        title: "Board & committee records",
        width: 400,
        height: 600,
        url: myUrl
    };

    SP.UI.ModalDialog.showModalDialog(options);
});
});
</script>

Answer 1

You can use SP.UI.ModalDialog Example:

var options = {
    title: "My Dialog Title",
    width: 400,
    height: 600,
    url: "/_layouts/DialogPage.aspx" };

SP.UI.ModalDialog.showModalDialog(options);

You will have to call the above line when user clicks on the link. So a good idea is to use jquery and then call this when user clicks on your link

EDIT: Code Added

Something like this should work. It requires Jquery to work

        <a class="ks-promo ks-promo--pink" linkto="LINK_YOU_WANT_TO_OPEN">LINK</a>
            <script>
  $(document).ready(function() {
$(".ks-promo.ks-promo--pink").click(function() {
    var myUrl = $(this).attr("linkto");
    var options = {
        title: "Board & committee records",
        width: 400,
        height: 600,
        url: myUrl
    };

    SP.UI.ModalDialog.showModalDialog(options);
});
});
</script>

This will open the Link mentioned in linkto attribute of anchor tag. You can achieve something similar for an image link. Just put the image inside the anchor tag

References: https://msdn.microsoft.com/en-us/library/office/ff410259(v=office.14).aspx https://msdn.microsoft.com/en-us/library/office/ff410058(v=office.14).aspx