Discussion :

[Cahaledor]

Bonjour à tous.

Cela fais plusieurs jours que je cherche une solution à mon problème d'affichage de titre de fancybox. En effet, voici ce que j'obtient lorsque j'affiche ma lightbox. Mon titre ne s'affiche qu'à moitié.




Je développe une application web en APS.NET/C# sous IE 8 avec VS2010. J'utilise jQuery 1.7 et fancybox 2.0.6. Ces technologies sont imposées par le client et ne peuvent pas être changées.

Voici les différents morceaux de code nécessaire à cet affichage.

1) Création d'un bouton qui ouvrira la fancybox après avoir effectué ses taches (sauvegarde de session par exemple)

Code :

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

1
2
3
4
 
btnHistory = (Button)ucBANContext.FindControl("btnHistory");
btnHistory.Visible = true;
this.btnHistory.Click += new EventHandler(btnHistory_Click);

2) Ajout du code de déclaration de la fancybox

Code :

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

1
2
3
4
 
Controls.AddAt(0, 
new LiteralControl(
"<a class=\"histo\" href=\"http://www.fancybox.net\" onClick=\"javascript:fancy();\"></a>"));

3) Dans la méthode "btnHistory_Click", création d'un trigger qui cliquera sur la balise <a> (fancybox) après avoir effectué le travail demandé au bouton.

Code :

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

1
2
 
Page.RegisterStartupScript("showModal", "<script language=\"javascript\">jQuery(\".histo\").trigger('click');</script>");

4) Fonction javascript de la fancybox

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
 
function fancy() {
                    $(".histo").fancybox({
                        openEffect: 'elastic',
                        closeEffect: 'elastic',
                        type: 'iframe',
                        autoSize: false,
                        width: 800,
                        height: 1200,
                        title:'est un test',
                        helpers: {
                            title: {
                                type: 'float'
                            },
                            overlay: {
                                opacity: 0.6,
                                closeClick: false,
                                css: {
                                    cursor: 'auto'
                                }
                            }
                        }
                    });
                }

J'ai essayé de nombreuses choses et je me retrouve à cours d'idées.

Merci pour votre aide, j’espère avoir été clair mais si vous avez des questions n’hésitez pas.