Div qui ne popup pas sous safari
Bonjour à tous,
Sur mon site, j'ai mis un sablier quand on clique sur le bouton "valider" de mon formulaire. Le temps que la page suivante se charge, ca doit afficher un div sombre avec une animation au centre. Ca fonctionne très bien sur chrome et firefox, comme on peut le voir ici :
http://dev.profil4.com/disc-essentiel.php
Par contre, ça ne s'affiche pas sous Safari. Ca se contente d'aller à la page suivante. Et plus étrange encore, si je clique sur "back", là je reviens donc à mon formulaire et je vois la div sombre avec l'animation...
D'un point de vue code, voici ce que j'ai fais :
Le CSS
Code:
1
2
3
4
5
6
7
8
9
10
11
| #spinner {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 20;
background: black;
opacity:0.7;
visibility: hidden;
} |
Dans le head, le code de l'animation :
Code:
<script src="js/spin.min.js"></script>
Dans la page, le formulaire et le bouton :
Code:
1
2
3
| <form action="disc-essentiel.php" method="post" id="disc-form" role="form" class="form-horizontal" >
<button type="submit" class="btn btn-default" id="disc-form-bouton">Commencer</button> |
Et en bas de page, la petite fonction de config :
Code:
1
2
3
4
5
6
| <script>
$( "#disc-form" ).submit(function( event ) {
$("#disc-form-bouton").prop("disabled", true);
showSpinner();
});
</script> |
Et ma fonction show :
Code:
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
| <div id="spinner"></div>
<script>
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#ffffff', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
var targetSpinner = document.getElementById('spinner');
if(targetSpinner != null) {
var spinner = new Spinner(opts).spin(targetSpinner);
}
function showSpinner() {
$("#spinner").css("visibility", "visible");
}
</script> |
Quelqu'un aurait une idée ?
Je précise que j'ai ce fonctionnement différent aussi bien sur le macbook que sur l'ipad. Je suppose que c'est vraiment une spécificité assumé de Safari du coup...
