[#40] Allow user to open a modal box by defining it in the URL

lektura
Marc Horne 2017-06-22 16:22:29 +02:00
parent 7043648bde
commit eb5817ad06
15 changed files with 38 additions and 2 deletions

View File

@ -2,6 +2,7 @@ modalID: 1
title: Leitfaden für die öffentliche Verwaltung title: Leitfaden für die öffentliche Verwaltung
date: 2014-07-05 date: 2014-07-05
img: 1.jpg img: 1.jpg
modalName: guideForPublicAdministration
category: Public Money, Public Code category: Public Money, Public Code
description: "<p>GERMAN Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse iaculis molestie nisl, dapibus viverra nisl vehicula eu. Phasellus a lorem vel felis dignissim varius. Aenean et porta velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean sodales augue eu lorem vestibulum luctus. Nunc bibendum sapien id ligula tempor, at tincidunt orci dignissim. Nam convallis, tortor nec bibendum ultrices, erat turpis vehicula enim, sit amet dictum leo urna non ante. Aenean fermentum finibus nibh, quis ultricies ipsum maximus vitae.</p> description: "<p>GERMAN Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse iaculis molestie nisl, dapibus viverra nisl vehicula eu. Phasellus a lorem vel felis dignissim varius. Aenean et porta velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean sodales augue eu lorem vestibulum luctus. Nunc bibendum sapien id ligula tempor, at tincidunt orci dignissim. Nam convallis, tortor nec bibendum ultrices, erat turpis vehicula enim, sit amet dictum leo urna non ante. Aenean fermentum finibus nibh, quis ultricies ipsum maximus vitae.</p>

View File

@ -2,5 +2,6 @@ modalID: 2
title: Leitfaden für die Öffentlichkeit title: Leitfaden für die Öffentlichkeit
date: 2014-07-06 date: 2014-07-06
img: 2.jpg img: 2.jpg
modalName: guideForGeneralPublic
category: Public Money, Public Code category: Public Money, Public Code
description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit. description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit.

View File

@ -2,5 +2,6 @@ modalID: 3
title: Werde aktiv! title: Werde aktiv!
date: 2014-07-07 date: 2014-07-07
img: 3.jpg img: 3.jpg
modalName: takeAction
category: Public Money, Public Code category: Public Money, Public Code
description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit. description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit.

View File

@ -2,5 +2,6 @@ modalID: 4
title: Neuigkeiten title: Neuigkeiten
date: 2014-07-09 date: 2014-07-09
img: 4.jpg img: 4.jpg
modalName: latestNews
category: Public Money, Public Code category: Public Money, Public Code
description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit. description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit.

View File

@ -2,5 +2,6 @@ modalID: 5
title: Informationsfreiheit title: Informationsfreiheit
date: 2014-07-08 date: 2014-07-08
img: 5.jpg img: 5.jpg
modalName: freedomOfInformation
category: Public Money, Public Code category: Public Money, Public Code
description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit. description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit.

View File

@ -2,5 +2,6 @@ modalID: 6
title: Presse title: Presse
date: 2014-07-10 date: 2014-07-10
img: 6.jpg img: 6.jpg
modalName: pressInformation
category: Public Money, Public Code category: Public Money, Public Code
description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit. description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit.

View File

@ -2,6 +2,7 @@ modalID: 1
title: Guide for Public Administration title: Guide for Public Administration
date: 2014-07-05 date: 2014-07-05
img: 1.jpg img: 1.jpg
modalName: guideForPublicAdministration
category: Public Money, Public Code category: Public Money, Public Code
description: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse iaculis molestie nisl, dapibus viverra nisl vehicula eu. Phasellus a lorem vel felis dignissim varius. Aenean et porta velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean sodales augue eu lorem vestibulum luctus. Nunc bibendum sapien id ligula tempor, at tincidunt orci dignissim. Nam convallis, tortor nec bibendum ultrices, erat turpis vehicula enim, sit amet dictum leo urna non ante. Aenean fermentum finibus nibh, quis ultricies ipsum maximus vitae.</p> description: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse iaculis molestie nisl, dapibus viverra nisl vehicula eu. Phasellus a lorem vel felis dignissim varius. Aenean et porta velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean sodales augue eu lorem vestibulum luctus. Nunc bibendum sapien id ligula tempor, at tincidunt orci dignissim. Nam convallis, tortor nec bibendum ultrices, erat turpis vehicula enim, sit amet dictum leo urna non ante. Aenean fermentum finibus nibh, quis ultricies ipsum maximus vitae.</p>

View File

@ -2,5 +2,6 @@ modalID: 2
title: Guide for general public title: Guide for general public
date: 2014-07-06 date: 2014-07-06
img: 2.jpg img: 2.jpg
modalName: guideForGeneralPublic
category: Public Money, Public Code category: Public Money, Public Code
description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit. description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit.

View File

@ -2,5 +2,6 @@ modalID: 3
title: Take Action! title: Take Action!
date: 2014-07-07 date: 2014-07-07
img: 3.jpg img: 3.jpg
modalName: takeAction
category: Public Money, Public Code category: Public Money, Public Code
description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit. description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit.

View File

@ -2,5 +2,6 @@ modalID: 4
title: Latest News title: Latest News
date: 2014-07-09 date: 2014-07-09
img: 4.jpg img: 4.jpg
modalName: latestNews
category: Public Money, Public Code category: Public Money, Public Code
description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit. description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit.

View File

@ -2,5 +2,6 @@ modalID: 5
title: Freedom of Information title: Freedom of Information
date: 2014-07-08 date: 2014-07-08
img: 5.jpg img: 5.jpg
modalName: freedomOfInformation
category: Public Money, Public Code category: Public Money, Public Code
description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit. description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit.

View File

@ -2,5 +2,6 @@ modalID: 6
title: Press information title: Press information
date: 2014-07-10 date: 2014-07-10
img: 6.jpg img: 6.jpg
modalName: pressInformation
category: Public Money, Public Code category: Public Money, Public Code
description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit. description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit.

View File

@ -1,7 +1,7 @@
{{ "<!-- RESOURCES MODALS -->" | safeHTML }} {{ "<!-- RESOURCES MODALS -->" | safeHTML }}
{{ $data := index .Site.Data .Site.Language.Lang }} {{ $data := index .Site.Data .Site.Language.Lang }}
{{ range $data.resources }} {{ range $data.resources }}
<div class="resources-modal modal fade" id="resourcesModal{{ .modalID }}" tabindex="-1" role="dialog" aria-hidden="true"> <div class="resources-modal modal fade" id="{{ .modalName }}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content"> <div class="modal-content">
<div class="close-modal" data-dismiss="modal"> <div class="close-modal" data-dismiss="modal">
<div class="lr"> <div class="lr">

View File

@ -6,7 +6,7 @@
<div class="row no-gutter"> <div class="row no-gutter">
{{ range $data.resources }} {{ range $data.resources }}
<div class="col-lg-4 col-sm-6"> <div class="col-lg-4 col-sm-6">
<a href="#resourcesModal{{ .modalID }}" class="resources-box resources-link" data-toggle="modal"> <a href="#{{ .modalName }}" class="resources-box resources-link" data-toggle="modal">
<img src="/img/resources/{{ .img }}" class="img-responsive" alt=""> <img src="/img/resources/{{ .img }}" class="img-responsive" alt="">
{{ if and .category .title }} {{ if and .category .title }}
<div class="resources-box-caption"> <div class="resources-box-caption">

View File

@ -46,3 +46,27 @@
new WOW().init(); new WOW().init();
})(jQuery); // End of use strict })(jQuery); // End of use strict
/*
* This function allows you to open a modal box by defining it in the URL
* e.g. https://localhost:1313/#resourcesModal1
*/
(function() {
if (window.location.href.indexOf('#') > -1) {
var modalID = window.location.href.split('#')[1];
var modal = document.getElementById(modalID);
modal.className += ' in';
modal.style.display = 'block';
var closeButtons = document.getElementsByClassName('close-modal');
for(var i = 0; i < closeButtons.length; i++) {
closeButtons[i].onclick = function() {
modal.style.display = 'none';
modal.className -= ' in';
};
}
}
})();