Icone non visible sur Internet Explorer 9

**Toufik83** · 03/11/2015, 00h17

bonsoir,

j'ai une fenêtre modal générée par (colorbox.js) avec une icone de fermeture en bas.
le problème sur I.E c'est que l'icone s'affiche comme ça Pièce jointe 191662 pourtant sous chrome est firefox s'affiche correctement Pièce jointe 191663.

en jquery j'ajoute cette icone ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#cboxContent").empty().append("<img id='cboxClose' class='imgfermer' alt='fermer'  />");

est-ce que c'est juste la configuration de mon serveur local asp.net qui fait le bug? si je met le site en ligne, l'image sous IE se comportera de la même façon?

**NoSmoking** · 03/11/2015, 11h42

Bonjour,
pour ce genre d'image il n'est peut être pas nécessaire d'avoir justement recours à une image.
exemple :

Code html :

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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Bouton close sans image</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font-size:100%;
  font: 1em/1.5 Verdana, sans-serif;
}
#main {
  width:60em;
  margin:0 auto;
}
h1, h2, h3 {
  color:#069;
}
.btn_close_popin {
  font-size:1.5em;
  font-weight:bold;
  color:#fff;
 
  padding:.125em;
  width:1em;
  height:1em;
  line-height:1em;
  text-align:center;
 
  border:.125em solid #fff;
  border-radius:50%;
  background:#f00;
  box-shadow:1px 1px 5px #888;
  cursor:pointer;
}
.btn_close_popin:hover {
  color:#f00;
  background:#fff;
  border-color:#f00;
  box-shadow:1px 1px 10px #f00;
}
.btn_close_popin:before {
  content:'\002716';
}
</style>
</head>
<body>
<div id="main">
  <h1>Bouton close sans image</h1>
  <div class="btn_close_popin"></div>
</div>
</body>
</html>

Sinon je dirais que tu as un problème de format de l'image.

**Toufik83** · 03/11/2015, 12h42

Bonjour,NoSmoking
je vous signale que l'image est en format png (annimée) et ses propriétés css sont définies dans le css approprié a colorbox.js comme ça :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
#cboxClose{position:absolute; bottom:0; right:0; background:url(../image/controls.png) no-repeat -25px 0;  width:25px; height:25px; text-indent:-9999px;}

j'ai fais plusieurs recherches sur les forums et tout le monde parle de SVG, j'ai même telechargé un logiciel qui convert les png en svg mais je sais pas franchement si je suis vers le bon chemin ou non.

**NoSmoking** · 03/11/2015, 14h19

...en jquery j'ajoute cette icone ainsi :

pourquoi ajouter un élément qui est géré par le plugin ?

...est en format png (annimée)

non c'est sur base d'image sprite !

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#cboxClose:hover {
    background-position: -25px -25px;
}

Testé sous IE8, j'ai pas mieux sous la main, pas rencontré de soucis d'affichage de l'image.

**Toufik83** · 03/11/2015, 15h20

justement, j'utilise Ajax pour afficher mon résultat dans la fenêtre modal, le conteneur HTML qui reçoit le résultat d'ajax s'appelle #cboxContent et c'est lui qui contient l'image de fermeture.

quand je fais

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#cboxContent").empty()

il vide tout ce qu'il y a dedans y compris l'image, c'est pour cela que je l'ajoute encore une fois puisque elle a déja été effacé par

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

$("").empty()

Code jquery :

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
$.ajax({
                    type: "POST", contentType: "application/json; charset=utf-8",
                    url: "../GestionCatego/Default.aspx/Editer",
                    data: JSON.stringify(donner),
                    dataType: "json",
                    cache: false,
                    success: function (msgE) {
                        for (var i = 0; i < msgE.d.length; i++) {
                            html += "<a id='Titre'>" + msgE.d[i].Titre + "</a><br/>";
                            html += "<a id='image'><img alt='' style='width:13em;height:13em' src='../photos/" + msgE.d[i].Image + "' /></a><br/>";
                            html += "<a id='date'>" + msgE.d[i].Date + "</a>";
                        }
                        //$.colorbox({ open: true });
                        $(this).colorbox({ open: true, inline: true, width: "50%", height: "50%", href: parseInt($(this).attr("id")) });
                        $("#colorbox").show("slow");
                        $("#cboxContent").empty().append("<img id='cboxClose' class='imgfermer'  alt='fermer'  />");
                        
                        $("#cboxClose").on("click", function () {
                            $("#colorbox,#cboxOverlay").hide("slow");
                        });
                        $("#cboxContent").append(html);
                    } //fin success

                });

**NoSmoking** · 03/11/2015, 15h33

...justement, j'utilise Ajax pour afficher mon résultat dans la fenêtre modal

as tu regardé l'exemple Outside HTML (Ajax) ?

**Toufik83** · 03/11/2015, 16h16

oui NoSmoking, c'est à l'aide de cette page que j'ai connus le colorbox(), mais dans l'exemple OutSideHtml ils mettent une page html comme résultat, alors que moi je reçois mes données en tant que JSON, j'ai pas trouvé un moyen pour faire pareil que l'exemple.

**NoSmoking** · 03/11/2015, 17h00

Visiblement tu ne t'attaques pas au bon conteneur, essaies de cibler/remplir <div id="cboxLoadedContent"....

j'ai pas trouvé un moyen pour faire pareil que l'exemple.

Tu peux également créer/modifier un élément que tu afficheras comme dans l'exemple Inline HTML de la même page d'exemple.

**Toufik83** · 04/11/2015, 14h52

bonjour Smoking,

Envoyé par NoSmoking

Visiblement tu ne t'attaques pas au bon conteneur, essaies de cibler/remplir <div id="cboxLoadedContent"....

Bravo,comme tu as dis, j'ai attaqué le #cboxLoadedContent et ça fonctionne parfait.
merci beaucoup Smoking, tu es génial.

**NoSmoking** · 04/11/2015, 15h56

Perso j'aurais plutôt opté pour la solution

Tu peux également créer/modifier un élément que tu afficheras comme dans l'exemple Inline HTML de la même page d'exemple.

Exemple de simulation retour Ajax

Code html :

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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Colorbox Examples</title>
<style>
body{
  font:1em/1.2 Verdana, sans-serif;
  padding:0 10px;
}
#main {
  max-width:60em;
  margin:auto;
}
h1, h2, h3 {
  font-size:1.5em;
  color: #069;
  text-shadow: 1px 1px 0px #fff;
}
</style>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function() {
    $('#btn_cde').on('click', function() {
        $('#inline_content').empty();
        $('#inline_content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.</p>');
        $.colorbox({
            inline: true,
            width: "50%",
            href: "#inline_content"
        })
    });
});
</script>
</head>
<body>
<div id="main">
    <h1>Exemple création dynamique</h1>
    <p><button id="btn_cde">Création contenu</button>
    Simulation d'un retour Ajax</p>
    <!-- This contains the hidden content for inline calls -->
    <div style='display:none'>
        <div id='inline_content' style='padding:10px; background:#fff;'>
        </div>
    </div>
</div>
</body></html>

la partie du code intéressante

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
    $('#btn_cde').on('click', function() {
        $('#inline_content').empty();
        $('#inline_content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.</p>');
        $.colorbox({
            inline: true,               // élément dans document
            width: "50%",
            href: "#inline_content"     // l'élément cible à afficher
        })
    });
});

**Toufik83** · 04/11/2015, 15h57

bonjour NoSmoking,

Bravo,comme tu as dis, j'ai attaqué le #cboxLoadedContent et ça fonctionne parfait.
le problème était dans cette ligne de jquery

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#cboxContent").empty().append("<img id='cboxClose' class='imgfermer'  alt='fermer'  />");

à chaque fois que je reçois les données ajax, je vide tout le contenu de #cboxContent avec .empty() y compris l'image png,puis je rajoute l'image png avec append() et sans SRC puisque elle est déjà définie dans le Css.

je ne savais pas qu'il y a un #cboxLoadedContent qui s'occupe de Ajax.
merci beaucoup NoSmoking, tu es génial.

Icone non visible sur Internet Explorer 9

jQuery

Discussions similaires

Partager

Partager