Coding Query - JQuery Popup
-
-
- Chris Cundy
- Hero Rocketeer
- Posts: 356
- Thanks: 0
- Freelance Web Designer & Hoster
-
Could you review this code for me? Its for something on SharePoint however you might be able to understand the syntax a little more than I.
This line of code link is linked to a page: <a href="/EARL/CompanySecretary" class="ks-promo ks-promo--pink">
Original Code
<div class="ks-promos">
<a href="/EARL/policy/Forms/Policies%20and%20Procedures.aspx" class="ks-promo ks-promo--orange">
<h2 class="ks-promo__title">Policy & procedures</h2>
<div class="ks-promo__icon">
<svg version="1.1" class="icon icon--folder" xmlns=" www.w3.org/2000/svg " xmlns:xlink=" www.w3.org/1999/xlink " x="0px" y="0px"
viewBox="0 0 350.8 227.4" enable-background="new 0 0 350.8 227.4" xml:space="preserve">
<g>
<defs>
<rect id="SVGID_1_1" width="350.8" height="227.4"/>
</defs>
<clipPath id="SVGID_2_1">
<use xlink:href="#SVGID_1_1" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_2_1)" d="M11.7,0h90.6c8.5,0,17.2,6.9,19.6,15.3l5.3,19.2h104.4c14.6,0,29.9,12.5,34.1,27.8L267,67
h-14.7c-5.7-9.8-16.8-16.9-27.5-16.9H52c-13,0-20.4,10.5-16.7,23.3c0,0,35.7,120.5,37.3,122.9l25-89c4.2-15.4,19.5-27.8,34.1-27.8
H331c14.6,0,23,12.5,18.7,27.8l-25.9,92.2c-4.2,15.4-19.5,27.8-34.1,27.8H85.5c-14.6,0-29.9-12.5-34.1-27.8L19.3,83.1c0,0,0,0,0,0
L0.6,15.3C-1.8,6.9,3.2,0,11.7,0"/>
</g>
</svg>
</div>
<svg version="1.1" class="icon icon--arrow--right" xmlns=" www.w3.org/2000/svg " xmlns:xlink=" 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_2" y="0" width="30.8" height="30.9"/>
</defs>
<clipPath id="SVGID_2_2">
<use xlink:href="#SVGID_1_2" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_2_2)" 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>Your one stop shop for all policies and procedures across the business.</p>
</div>
</a>
<a href="/EARL/policy/Forms/Job%20Descriptions.aspx" class="ks-promo ks-promo--green">
<h2 class="ks-promo__title">Job descriptions</h2>
<div class="ks-promo__icon">
<svg version="1.1" class="icon icon--case" xmlns=" www.w3.org/2000/svg " xmlns:xlink=" www.w3.org/1999/xlink " x="0px" y="0px"
viewBox="0 0 34 30.6" enable-background="new 0 0 34 30.6" xml:space="preserve">
<g id="bag">
<g>
<g>
<path d="M32,4.4H2.1C0.9,4.4,0,5.3,0,6.5v5.7c0,1.1,0.9,2.1,2.1,2.1h13.3v-0.4c0-0.9,0.7-1.6,1.6-1.6
c0.9,0,1.6,0.7,1.6,1.6v0.4H32c1.1,0,2.1-0.9,2.1-2.1V6.5C34,5.3,33.1,4.4,32,4.4z"/>
<path d="M17,17.2c-0.9,0-1.6-0.7-1.6-1.6v-0.4L2,15.3c-0.4,0-0.8-0.1-1.1-0.3l0.1,13.6c0,1.1,1,1.9,2.2,1.9h27.7
c1.2,0,2.2-1.1,2.2-2.2L33,14.7c-0.3,0.2-0.7,0.3-1.1,0.3l-13.2,0.1v0.4C18.7,16.5,17.9,17.2,17,17.2z"/>
<path d="M18,13.8c0-0.6-0.5-1-1-1c-0.6,0-1,0.5-1,1v0.4h2V13.8z"/>
<path d="M17,16.6c0.6,0,1-0.5,1-1v-0.4l-2,0v0.4C16,16.1,16.5,16.6,17,16.6z"/>
<path d="M17,12.8c-0.6,0-1,0.5-1,1v0.4v1v0.4c0,0.6,0.5,1,1,1c0.6,0,1-0.5,1-1v-0.4v-1v-0.4
C18,13.3,17.6,12.8,17,12.8z"/>
</g>
<g>
<path d="M10.7,2.7c0-0.9,0.7-1.7,1.7-1.7h9.4c0.9,0,1.7,0.7,1.7,1.7v0.9H25V2.1C25,0.9,24,0,22.9,0H11.2
C10,0,9.1,0.9,9.1,2.1v1.5h1.6V2.7z"/>
</g>
</g>
</g>
</svg>
</div>
<svg version="1.1" class="icon icon--arrow--right" xmlns=" www.w3.org/2000/svg " xmlns:xlink=" 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_3" y="0" width="30.8" height="30.9"/>
</defs>
<clipPath id="SVGID_2_3">
<use xlink:href="#SVGID_1_3" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_2_3)" 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>Here’s where you’ll find all of our job descriptions and job specific requirements.</p>
</div>
</a>
<a href="/EARL/policy/Forms/Structure%20Charts.aspx" class="ks-promo ks-promo--purple">
<h2 class="ks-promo__title">Structure charts</h2>
<div class="ks-promo__icon">
<svg version="1.1" class="icon icon--structure" xmlns=" www.w3.org/2000/svg " xmlns:xlink=" www.w3.org/1999/xlink " x="0px"
y="0px" viewBox="0 0 676.9 432.5" enable-background="new 0 0 676.9 432.5" xml:space="preserve">
<g>
<path d="M451,163H226c-23.2,0-42-18.8-42-42V42c0-23.2,18.8-42,42-42h225c23.2,0,42,18.8,42,42v79C493,144.2,474.2,163,451,163z
M226,26c-8.8,0-16,7.2-16,16v79c0,8.8,7.2,16,16,16h225c8.8,0,16-7.2,16-16V42c0-8.8-7.2-16-16-16H226z"/>
<rect x="325.5" y="150" width="26" height="72"/>
</g>
<g>
<path d="M534.3,285.9h-26V251c0-8.8-7.2-16-16-16H184.7c-8.8,0-16,7.2-16,16v34.8h-26V251c0-23.2,18.8-42,42-42h307.6
c23.2,0,42,18.8,42,42V285.9z"/>
</g>
<rect x="245.5" y="69.3" width="186" height="26"/>
<path d="M267,432.5H42c-23.2,0-42-18.8-42-42v-79c0-23.2,18.8-42,42-42h225c23.2,0,42,18.8,42,42v79
C309,413.7,290.2,432.5,267,432.5z M42,295.5c-8.8,0-16,7.2-16,16v79c0,8.8,7.2,16,16,16h225c8.8,0,16-7.2,16-16v-79
c0-8.8-7.2-16-16-16H42z"/>
<rect x="61.5" y="338.8" width="186" height="26"/>
<path d="M634.9,432.5h-225c-23.2,0-42-18.8-42-42v-79c0-23.2,18.8-42,42-42h225c23.2,0,42,18.8,42,42v79
C676.9,413.7,658,432.5,634.9,432.5z M409.9,295.5c-8.8,0-16,7.2-16,16v79c0,8.8,7.2,16,16,16h225c8.8,0,16-7.2,16-16v-79
c0-8.8-7.2-16-16-16H409.9z"/>
<rect x="429.4" y="338.8" width="186" height="26"/>
</svg>
</div>
<svg version="1.1" class="icon icon--arrow--right" xmlns=" www.w3.org/2000/svg " xmlns:xlink=" 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_4" y="0" width="30.8" height="30.9"/>
</defs>
<clipPath id="SVGID_2_4">
<use xlink:href="#SVGID_1_4" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_2_4)" 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>Looking for a team structure chart? Find it here.</p>
</div>
</a>
<a href="/EARL/CompanySecretary" class="ks-promo ks-promo--pink">
<h2 class="ks-promo__title">Board & committee records</h2>
<div class="ks-promo__icon">
<svg version="1.1" class="icon icon--file" xmlns=" www.w3.org/2000/svg " xmlns:xlink=" 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=" www.w3.org/2000/svg " xmlns:xlink=" 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>
Code functionality to add:
<a href="javascript:void(0)" class="ks-promo ks-promo--pink" linkto="YOUR LINK"> <script> $(document).ready(function() { $(".ks-promo ks-promo--pink").click(function() { var myUrl = $(this).attr("linkto"); var options = { title: "My Dialog Title", width: 400, height: 600, url: myurl }; SP.UI.ModalDialog.showModalDialog(options); }); }); </script>
Im just a little confused where to add this in - any ideas?? - Last Edit: 8 years 2 months ago by Chris Cundy.
- Kind Regards,
Chris Cundy
RocketTheme Geek
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
I am sorry that we missed your post on this occasion. It is rare but it does happen. Do you still require assistance?
We can't really review third-party code within the scope of this forum. You also didn;t state what template or Gantry version you wish to used it in?
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.047 seconds