<main id="page-wrapper">
    
    <!-- Eléménts cliquables -->
    <p>
        <a class="link-media" data-mediatype="img" href="https://res.cloudinary.com/dnqehhgmu/image/upload/v1509718497/sea_ej0zoc.jpg" title="Envie d'évasion ?">Ouverture d'une image</a>
    </p>
    <p>
        <a class="link-media" data-mediatype="video" href="https://res.cloudinary.com/dnqehhgmu/video/upload/v1509981466/rickroll_w11xqz.mp4" title="Never gonna give you up">Ouverture d'une vidéo</a>
    </p>
    <p>
        <a class="link-media" data-mediatype="pdf" href="http://res.cloudinary.com/dnqehhgmu/image/upload/v1509980892/24joursdeweb_pcxw8n.pdf" title="Les frameworks, c'est pas automatique !">Ouverture d'un pdf</a>
    </p>
    <p>
        <a class="link-media" data-mediatype="iframe" href="https://www.24joursdeweb.fr/2017/lancement/" title="24 jours de Web 2017">Ouverture d'une iframe</a>
    </p>
    
</main>

<!-- Fenêtre modale -->
<aside id="fullPage-alert" class="fullPage-alert hidden" aria-hidden="true">
    <div id="fullPage-alert-container" class="fullPage-alert-container" role="dialog">
        <button type="button" id="fullPage-alert-close" class="fullPage-alert-close" aria-label="Fermer"></button>
        <div id="fullPage-alert-content" class="fullPage-alert-content"></div>
        <div class="fullPage-alert-title-wrapper">
            <h4 id="fullPage-alert-title" class="fullPage-alert-title"></h4>
        </div>
    </div>
</aside>
body {
  margin: 0;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 14px;
}

body .hidden {
  display: none;
}

/* Alter container */

.fullPage-alert {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.85);
  -webkit-transition: opacity 0.35s ease-out;
  transition: opacity 0.35s ease-out;
}

.fullPage-alert-container {
  position: relative;
}

.fullPage-alert-container.fullPage {
  width: 100%;
  height: 100%;
}

/* Alert title and close */

.fullPage-alert-title-wrapper {
  position: absolute;
  bottom: -15px;
  left: 15px;
  right: 15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.fullPage-alert-title {
  margin: 0;
  padding: 0 10px;
  line-height: 24px;
  border-radius: 10px;
  border: 3px solid #FFF;
  background-color: #0463B3;
  color: #FFF;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fullPage-alert-close {
  z-index: 2;
  position: absolute;
  top: -16px;
  right: -16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #0463B3;
  background-image: url("https://res.cloudinary.com/dnqehhgmu/image/upload/v1509980709/white-cross_kaqkmp.svg");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
  border: 3px solid #FFF;
  cursor: pointer;
  -webkit-transition: background-size 0.15s ease-out;
  transition: background-size 0.15s ease-out;
}

.fullPage-alert-close:hover,
.fullPage-alert-close:focus {
  background-size: 20px 20px;
}

/* Alert content */

.fullPage-alert-content {
  box-sizing: border-box;
  z-index: 1;
  height: 100%;
 display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  overflow: auto;
  border: 3px solid #FFF;
  border-radius: 5px;
  background-color: #000;
}

.fullPage-iframe,
.fullPage-object {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  border: none;
  overflow: auto;
}

.fullPage-image,
.fullPage-video {
  max-width: calc(100vw - 46px);
  max-height: calc(100vh - 46px);
}

/* Link display */

.link-media {
  display: block;
  width: 180px;
  padding: 10px;
  margin-left: 20px;
  text-align: center;
  border-radius: 5px;
  background-color: #0463B3;
  color: #FFF;
  text-decoration: none;
  -webkit-transition: background-color 0.25s ease-out;
  transition: background-color 0.25s ease-out;
}

.link-media:hover,
.link-media:focus {
  background-color: #3AA996;
}
/*
 * Elément cliquable ayant déclenché l'ouverture modale en cours
 */
var alertOpener;

/*
 * Eléments navigables du corps de page
 */
var navTabs = [];

/*
 * Tabindex des éléments navigables du corps de page
 */
var navTabsTabindex = [];

/*
 * Traitement de tous les media en affichage modal
 */
var mediaLinks = document.getElementsByClassName('link-media');
var mediaLinksNb = mediaLinks.length;
for (var i=0;i<mediaLinksNb;i++) {
	mediaLinks[i].addEventListener('click', function(e) {
		
        e.preventDefault();
        
        // Récupération des valeurs
        if (!this.href) {
            return;
        }
        var href = this.href;
        var title = '';
        if (this.title) {
            title = this.title;
        }
        var mediaText = '';
        var isFullPage = false;
        
        // Switch selon le type de media
        switch (this.getAttribute('data-mediatype')) {
            
            // Ouverture modale d'une image
            case 'img' :
                mediaText = '<img src="'+href+'" alt="'+title+'" class="fullPage-image" />';
                break;
            
            // Ouverture modale d'une video
            case 'video' :
                mediaText = '<video class="fullPage-video" itemprop="url" title="'+title+'" alt="'+title+'" controls autoplay>';
                mediaText += '<source itemprop="url" content="'+window.location.protocol+'//'+window.location.hostname+href+'" src="'+href+'" type="video/mp4" />';
                mediaText += '<a href="'+href+'" download>'+title+'</a>';
                mediaText += '</video>';
                break;
            
            // Ouverture modale d'un pdf
            case 'pdf' :
                mediaText = '<object class="fullPage-object" data="'+href+'" type="application/pdf"></object>';
                isFullPage = true;
                break;
            
            // Ouverture modale d'une iframe
            case 'iframe' :
                mediaText = '<iframe class="fullPage-iframe" src="'+href+'" allowfullscreen></iframe>';
                isFullPage = true;
                break;
            
        }
		
        // Affichage de la fenetre
        if (mediaText!='') {
            displayFullPageAlert(mediaText,title,isFullPage);
            alertOpener = this;
        }
        
	},false);
}


/**
 * Affichage de la fenetre modale et remplissage de son contenu
 */
function displayFullPageAlert(content,title,isFullPage,openerId) {
	
    // Remplissage du contenu
    document.getElementById('fullPage-alert-content').innerHTML = content;
    if (title!='') {
        document.getElementById('fullPage-alert-title').textContent = title;
        document.getElementById('fullPage-alert-title').className = 'fullPage-alert-title';
    }
    if (isFullPage) {
        document.getElementById('fullPage-alert-container').className = 'fullPage-alert-container fullPage';
    } else {
        document.getElementById('fullPage-alert-container').className = 'fullPage-alert-container';
    }
	
    // Apparition fondue
    document.getElementById('fullPage-alert').style.opacity = '0';
	document.getElementById('fullPage-alert').className = 'fullPage-alert';
    
    // Accessibilité (aria + navigation clavier)
    document.getElementById('fullPage-alert').removeAttribute('aria-hidden');
    document.getElementById('page-wrapper').setAttribute('aria-hidden','true');
    disableMainNavTab();
	
    // Apparition totale
    setTimeout(function() {
		document.getElementById('fullPage-alert').style.opacity = '1';
		document.documentElement.style.overflow = 'hidden';
        // Focus sur la croix de fermeture
        document.getElementById('fullPage-alert-close').focus();
	},350);
    
}

/*
 * Fermeture de la fenêtre modale par clic ou echap
 */
document.getElementById('fullPage-alert-close').addEventListener('click',closeFullPageAlert,false);
document.addEventListener('keydown',function(e) {
	var code = e.keyCode || e.which;
	if (code === 27 && document.getElementById('fullPage-alert').className.indexOf('hidden')==-1) {
		closeFullPageAlert();
	} 
},false);

/**
 * Fermeture de la fenêtre modale
 */
function closeFullPageAlert() {
    
    // Disparition fondue
    document.documentElement.style.overflow = '';
    document.getElementById('fullPage-alert').style.opacity = '0';
    
    // Accessibilité (aria + navigation clavier)
    document.getElementById('fullPage-alert').setAttribute('aria-hidden','true');
    document.getElementById('page-wrapper').removeAttribute('aria-hidden');
    repairMainNavTab();
    
    // Focus de retour sur l'élément ayant déclenché l'ouverture modale
    alertOpener.focus();
    
    // Disparition totale
    setTimeout(function() {
        document.getElementById('fullPage-alert').className = 'fullPage-alert hidden';
        document.getElementById('fullPage-alert-content').innerHTML = '';
        document.getElementById('fullPage-alert-title').textContent = '';
        document.getElementById('fullPage-alert-title').className = 'fullPage-alert-title hidden';
    },350);
    
}

/**
 * Fonction désactivant la navigation clavier derrière la modale
 */
function disableMainNavTab() {
    navTabs = document.getElementById('page-wrapper').querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex^="-"]), iframe, object');
    var navTabsNb = navTabs.length;
    navTabsTabindex = [];
    for (var i=0;i<navTabsNb;i++) {
        // Garde en mémoire les valeurs de tabindex
        var tabIndex = navTabs[i].getAttribute('tabindex');
        if (tabIndex==null) {
            navTabsTabindex[i] = tabIndex
        } else {
            navTabsTabindex[i] = -9999;
        }
        // Bloque la navigation clavier
        navTabs[i].setAttribute('tabindex','-1');
    }
}

/**
 * Fonction réactivant la navigation clavier derrière la modale
 */
function repairMainNavTab() {
    var navTabsNb = navTabs.length;
    for (var i=0;i<navTabsNb;i++) {
        // Réinitialise les valeurs de tabindex
        var tabIndex = navTabsTabindex[i];
        if (navTabsTabindex[i] = -9999) {
            navTabs[i].removeAttribute('tabindex');
        } else {
            navTabs[i].setAttribute('tabindex',tabIndex);
        }
    }
}
Rerun