Affichage d'une div (pop up) sur un frameset
Helloooo :)
Je cale sur un petit souci.
Le site est composé d'un frameset (oui, je sais, pas bien, faut plus le faire, mais personne n'explique précisément la raison technique à part en disant "C'est pas sécure"... Je ne vois pas trop de ce qu'il y a de pas sécure d'afficher 2 pages dans une mais bon, ce n’est pas le sujet :P ) avec un frame en haut dans lequel il y a le player (webradio) et en dessous un frame pour afficher les divers éléments (playlist, disques à la demande, tchat ...) sans couper le son (rechargement de page) entre les pages.
Pour une fonction spécifique aux admins du site (le propriétaire de la radio et moi même), j'utilise une div sur la page top , afin de pouvoir afficher un pop up pour corriger les tags artiste et titre en direct si il y a une erreur.
Donc, juste au début du body, voici la div (provenant de https://html-online.com/articles/simple-popup-box/ et adapté à mon besoin) :
Code:
1
2
3
4
5
6
| <div id="bubul" class="hover_bkgr_fricc" style="display:none;" onclick="showDivbubul();">
<span class="helper"></span>
<div>
<p><div id="messagebubul" class="messagebubul" ></div></p>
</div>
</div> |
Le style :
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
33
34
35
36
37
38
39
40
41
42
43
44
45
| /* Popup box BEGIN */
div.bubul {
background:rgba(255,0,0,1);
}
div.messagebubul {
cursor: context-menu;
color: #000000;
font-family: Verdana, sans-serif;
font-style: italic;
font-weight: bold;
font-size: 110%;
}
.hover_bkgr_fricc{
cursor: default;
background:rgba(0,0,0,0);
display:none;
height:100%;
position:fixed;
text-align:center;
top:0;
width:100%;
z-index:10000;
}
.hover_bkgr_fricc .helper{
display:inline-block;
height:100%;
vertical-align:middle;
}
.hover_bkgr_fricc > div {
background-color: #fff;
box-shadow: 10px 10px 50px #555;
display: inline-block;
height: auto;
max-width: 60%;
min-height: 20px;
vertical-align: middle;
min-width: 150px;
position: relative;
border-radius: 8px;
padding: 10px 50px 10px 50px; /* Haut Droite Bas */
}
/* Popup box END */ |
Code dans la balise script :
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
| $('#bubul').bind('click touch', function(event) {
document.getElementById("bubul").style.display = 'none';
});
$('#messagebubul').bind('click touch', function(event) {
event.stopPropagation();
});
function showDivbubul(id){
if(document.getElementById("bubul").style.display == 'none' ) {
$.ajax({
type: 'POST',
url: './acp/retaglive.php',
data: { id: id },
success: function(data){
$("#messagebubul").html('');
$("#messagebubul").append(data);
}
});
document.getElementById("bubul").style.display = 'inline';
}
} |
Puis je déclenche la fonction showDivbubul() par un onClick à l'endroit souhaité.
Ca marche très bien mais le pop up est centrée sur la page du frame d'en haut (ce qui est logique).
Pour une autre fonction (modification de la pochette du disque) ,je souhaiterais que ce pop up soit affiché centrée sur l'écran (enfin fenêtre du navigateur) et non celle du frame top.
Évidement, j’ai essayé en mettant la div avant le frameset de la page index, et en rajoutant des window.parent (ou autres combinaisons testées) devant les document.getElementById etc etc, mais rien n'y fait, je ne suis pas parvenu à afficher le pop up .
Si quelqu'un à une idée :oops: je serais preneur :)
Merci et bon ouiK :D
Couin
