Bonjour,
Je suis en train de monter mon portfolio et j'ai un problème avec un plugin qui s'appelle morphing modal window.
http://codyhouse.co/demo/morphing-mo...w/index.html#0
J'ai modifié un peu le code source de ce plugin pour le faire fonctionner avec un autre plugin qui est celui-ci http://tympanus.net/Tutorials/Thumbn...andingPreview/

Voici l'adresse de mon site : http://thibaut-lalanne.com/#projets
Dans la section Projets, lorsque l'on clique sur un projet, cela déclenche le plugin Thumbnail Grid affiche un aperçu du projet. Le plugin va intégrer un div class="cd-modal-action" dynamiquement en js qui contient un a avec la classe modal-trigger. Au clic sur ce lien (.on("click")) je déclenche le plugin morphing modal qui ouvre une fenêtre modale et affiche le contenu de mon projet.
Et ensuite, on peut fermer le projet en cliquant sur le bouton avec la croix. Ca fonctionne impec sur firefox mais ça bug sur Safari et Chrome, auriez vous une solution ?

Le code source si ca peut aider.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
//Plugin Fire modal Window
  //trigger the animation - open modal window
    $('#global').on('click', '[data-type="modal-trigger"]', function(){
      var actionBtn = $(this),
        scaleValue = retrieveScale(actionBtn.next('.cd-modal-bg'));
 
      actionBtn.addClass('to-circle');
 
      titreProjet = $(this).parent().parent().children('h3').html();
      titreProjet = titreProjet.toLowerCase().replace(' ','');
      var contenuArticle = $('.'+titreProjet).html();
      ajoutContenuProjet = '<div class="'+titreProjet+'">'+contenuArticle+'</div>';
 
      var ajoutContentModal = $('.cd-modal-content').append(ajoutContenuProjet);
      actionBtn.next('.cd-modal-bg').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
        animateLayer(actionBtn.next('.cd-modal-bg'), scaleValue, true);
        $('.'+titreProjet).fadeIn();
      });
 
      //if browser doesn't support transitions...
      if(actionBtn.parents('.no-csstransitions').length > 0 ) animateLayer(actionBtn.next('.cd-modal-bg'), scaleValue, true);
    });
 
    //trigger the animation - close modal window
    $('#global').on('click', '.cd-section .cd-modal-close', function(){
      var section = $('.cd-section');
      section.removeClass('modal-is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
        animateLayer($('.cd-modal-bg'), 1, false);
        $('.cd-modal-content').html('');
        $('.'+titreProjet).hide();
      });
 
      //if browser doesn't support transitions...
      if(section.parents('.no-csstransitions').length > 0 ) animateLayer(section.find('.cd-modal-bg'), 1, false);
    });
    $(document).keyup(function(event){
      if(event.which=='27') closeModal();
    });
 
    $(window).on('resize', function(){
      //on window resize - update cover layer dimention and position
      if($('.cd-section.modal-is-visible').length > 0) window.requestAnimationFrame(updateLayer);
    });
 
    function retrieveScale(btn) {
      var btnRadius = btn.width()/2,
        left = btn.offset().left + btnRadius,
        top = btn.offset().top + btnRadius - $(window).scrollTop(),
        scale = scaleValue(top, left, btnRadius, $(window).height(), $(window).width());
 
      btn.css('position', 'fixed').velocity({
        top: top - btnRadius,
        left: left - btnRadius,
        translateX: 0,
      }, 0);
 
      return scale;
    }
 
    function scaleValue( topValue, leftValue, radiusValue, windowW, windowH) {
      var maxDistHor = ( leftValue > windowW/2) ? leftValue : (windowW - leftValue),
        maxDistVert = ( topValue > windowH/2) ? topValue : (windowH - topValue);
      return Math.ceil(Math.sqrt( Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2) )/radiusValue);
    }
 
    function animateLayer(layer, scaleVal, bool) {
      layer.velocity({ scale: scaleVal }, 400, function(){
        $('body').toggleClass('overflow-hidden', bool);
        (bool) 
          ? $('.cd-section').addClass('modal-is-visible').end().off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend')
          : layer.removeClass('is-visible').removeAttr( 'style' ).siblings('[data-type="modal-trigger"]').removeClass('to-circle');
      });
    }
 
    function updateLayer() {
      var layer = $('.cd-section.modal-is-visible').find('.cd-modal-bg'),
        layerRadius = layer.width()/2,
        layerTop = layer.siblings('.btn').offset().top + layerRadius - $(window).scrollTop(),
        layerLeft = layer.siblings('.btn').offset().left + layerRadius,
        scale = scaleValue(layerTop, layerLeft, layerRadius, $(window).height(), $(window).width());
 
      layer.velocity({
        top: layerTop - layerRadius,
        left: layerLeft - layerRadius,
        scale: scale,
      }, 0);
    }
Merci