---
title: Popup Javascript
description: "Créer un popup avec du contenu HTML (tableau, retour à la ligne ,...) dans un composant BiBOARD. **Ce code est fourni à titre d'exemple et son utilisation ne saurait engager BiBOARD.** **BiBOARD ne fournit pas de support sur cette réalisation.**…"
url: "https://wiki.biboard.fr/wiki/popup-javascript/"
updated: "2025-06-05"
category: Comment faire?
---

# Popup Javascript

Créer un popup avec du contenu HTML (tableau, retour à la ligne ,...) dans un composant BiBOARD.

**Ce code est fourni à titre d'exemple et son utilisation ne saurait engager BiBOARD.**
**BiBOARD ne fournit pas de support sur cette réalisation.**

Ce script est très rapide pour afficher une faible quantité d'information.
Cet exemple est lié à la base démonstration, table satisfaction client.

# Modifications dans le Hub

Vous pouvez créer un champ calculé pour préparer le contenu de votre popup ligne par ligne :

## **Exemple 1 : avec la balise span et retour à la ligne**:

```
"<div class='BBPopup' onclick='BBFunctionPopup(event,"BBPopup" & trim(Field("CodeMois")) & "")'>" &
  Field("NomMois") &
  "<span class='BBPopuptext' id='BBPopup" & trim(Field("CodeMois")) & "'>" &
    "<b>" & Field("NomMois") & "</b><br/><br/>" &
    "Nombre : " & Field("Nombre") & "</br>" &
    "Ratio : " & Field("Ratio") & "</br>" &
    "Code :  " & Field("CodeMois") & "</br>" &
  "</span>
</div>"
```

## **Exemple 2 : avec un tableau**:

```
"<div class='BBPopup' onclick='BBFunctionPopup(event,"BBPopupTable" & trim(Field("CodeMois")) & "")'>" &
  Field("NomMois") &
  "<Table class='BBPopuptext' id='BBPopupTable" & trim(Field("CodeMois")) & "'>" &
    "<tr><td colspan=2>" & Field("NomMois") & "</td></tr>" &
    "<tr><td>Nombre</td><td>" &  Field("Nombre") &   "</td></tr>" &
    "<tr><td>Ratio</td><td>" & Field("Ratio") &  "</td></tr>" &
    "<tr><td>Code</td><td>" & Field("CodeMois") &   "</td></tr>" &
  "</table>
</div>"
```

# Modifications dans le Tableau de bord

Sur le studio, dans l'onglet propriétés du tableau de bord, coller ce script dans l'entête :

```
<script src="/resources/script/BBPopup/BBPopup.js" type="text/javascript"></script>
<link href="/resources/script/BBPopup/BBPopup.css" rel="stylesheet" type="text/css" media="all">
```

A partir de la version 17.2.19 :

```
<script src="/resources/script/BBPopup/BBPopup.js" type="text/javascript"></script>
<link href="/resources/script/BBPopup/BBPopup.css" rel="stylesheet" type="text/css" media="all">
```

# Fichier script BBPopup.js

Le script suivant permet d'afficher le popup passée en paramètre.

Il masque aussi toute les popups visibles dans la page.

Note : à partir de la version 17.2.19, ce fichier est installé avec BiBOARDA sauvegarder dans : **RACINE_DU_SERVEUR_WEB_BIBOARD/resources/script/BBPopup/BBPopup.js**

```
      function BBFunctionPopup(event,IdPopup)
      {
         var popups = document.getElementsByClassName('BBPopuptext');
         for (i = 0; i < popups.length; i++)
         {
              if (popups[i].getAttribute('id') != IdPopup)
              {
              popups[i].classList.remove('show');
              }
         }
         var popup = document.getElementById(IdPopup);
         popup.classList.toggle('show');
         popup.style.top = (event.clientY - popup.clientHeight - 10) + 'px';
         popup.style.left = (event.clientX- popup.clientWidth/2) + 'px';
      }
```

# Fichier CSS BBPopup.css

Note : à partir de la version 17.2.19, ce fichier est installé avec BiBOARD
**A sauvegarder dans : RACINE_DU_SERVEUR_WEB_BIBOARD/resources/script/BBPopup/BBPopup.css** :

```
/* Popup container */
 .BBPopup {
     position: inherit;
     display: inline-block;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 /* The actual popup */
 .BBPopup .BBPopuptext {
     visibility: hidden;
     color: #fff;
     background-color:  rgba(230, 230, 230,1);
     text-align: center;
     border-radius: 6px;
     padding: 5px 25px 5px 25px;
     position: fixed;
     left: 0px;
     margin-left: 0px;
 }

.BBPopup .BBPopuptext:hover {
	 background-color:  rgba(200, 200, 200,1);
 }

 /* Popup arrow */
 .BBPopup .BBPopuptext::after {
     content: "";
     position: absolute;
     top: 100%;
     left: 10px;
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: #555 transparent transparent transparent;
 }

 /* Toggle this class - hide and show the popup */
 .BBPopup .show {
     visibility: visible;
     -webkit-animation: fadeIn 1s;
     animation: fadeIn 1s;
 }

 /* Add animation (fade in the popup) */
 @-webkit-keyframes fadeIn {
     from {opacity: 0;}
     to {opacity: 1;}
 }

 @keyframes fadeIn {
     from {opacity: 0;}
     to {opacity:1 ;}
 }
```

# Exemple

## Comment utiliser la popup Javascript dans un tableau

Pour la création d’une popup Javascript dans un tableau, nous utiliserons la requête suivante enregistrée sous le nom : **Wiki-PP-Popup Javascript-01**.
Nous procéderons à la création de la requête suivante avec ses données :

```
USE [Datawarehouse]GO/ Object: Table [dbo].[Wiki-PP-Popup_Java] Script Date: 05/06/2025 11:33:41 / DROP TABLE IF EXISTS [dbo].[Wiki-PP-Popup_Java] GO / Object: Table [dbo].[Wiki-PP-Popup_Java] Script Date: 05/06/2025 11:33:41 /SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOCREATE TABLE [dbo].[Wiki-PP-Popup_Java]([NomMois] nvarchar NULL,[Nombre] [int] NULL,[Ratio] [int] NULL,[CodeMois] nvarchar NULL) ON [PRIMARY]GOINSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Janvier', 10, 2, N'01')GOINSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Février', 15, 3, N'02')GOINSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Mars', 25, 2, N'03')GOINSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Avril', 45, 4, N'04')GOINSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Mai', 33, 5, N'05')GOINSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Juin', 22, 6, N'06')GOINSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Juillet', 75, 2, N'07')GOINSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Août', 66, 3, N'08')GOINSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Septembre', 55, 3, N'09')GOINSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Octobre', 44, 7, N'10')GOINSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Novembre', 33, 4, N'11')GOINSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Décembre', 66, 1, N'12')GO
```

![](https://wiki.biboard.fr/wp-content/uploads/2025/06/PP-Popup-Javascript-Tableau-01.gif)