0

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>
0

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

  • Unsure how to include that in my code though :( – surfnode Feb 17 '16 at 14:33
  • Updated the code :) – Dhruv Jain Feb 18 '16 at 4:05
  • I've added this in but its still not working - please review my edit in original post. Thanks. – surfnode Feb 18 '16 at 11:20
  • Updated the code. LINK_YOU_WANT_TO_OPEN will be equal to "sps-2013-04/EARL/CompanySecretary" in your case – Dhruv Jain Feb 19 '16 at 8:21
  • OK, so where do I add this? var options = { title: "My Dialog Title", width: 400, height: 600, url: "/_layouts/DialogPage.aspx" }; SP.UI.ModalDialog.showModalDialog(options); – surfnode Feb 19 '16 at 9:21

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.