11497 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Je m'appelle kiltea et suis webdesigner freelance.

Ma configuration WP actuelle
- Version de WordPress : 3.3.1
- Thème utilisé : LondonLive Cw


Problème(s) rencontré(s) :

Voila, je souhaiterai mettre en place une pop up qui s'affiche dès que le site est visité via un smartphone ou une tablette (donc un système de détection). Dans cette pop up il y aurai d'affiché deux liens pointant vers des pages pages web (pour télécharger l'application du site sur l'app store et l'androide market). J'aimerai également pouvoir designer cette pop up. Je fais appel à vos lumières. Milles merci d'avance. Smiley biggrin

Ps : N'hésitez pas à bien me détailler vos explications, car je suis encore novice sur wordpress Smiley confused .
Modifié par kiltea (01 Feb 2013 - 11:38)
Re :

Voila, j'ai un peu avancé au niveau de la création de la pop up (mais rien de concret) :

Mon code pour la pop up :

    <div id="popupdlapp">
    <img src="images/telecharger.jpg" alt="Télécharger l'application" width="190" height="77"/>
    <a href="#"><img src="images/appstore.jpg" alt="Disponible sur l'Appstore" width="190" height="100"/></a>
    <a href="#"><img src="images/android.jpg" alt="Disponible sur l'Android market" width="190" height="104"/></a>
    <!--J'aimerai pouvoir fermer cette pop up en cliquant sur cette image--><a href="#"><img src="images/fermer.jpg" alt="Fermer la fenêtre" width="190" height="69"/></a>


J'ai également un lien d'ouverture de cette pop up, mais j'aimerai qu'elle s'affiche automatiquement dès l'ouverture du site sur mobile :

    <script type="text/javascript" src="center.js"></script>
    </head>

    <body>
    <!--Cette fonction js permet de centrer la pop up--> <a href='javascript [langue]opupCentrer("popup.html", 190, 350, "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no")'>texte du lien</a>
    </body>


J'ai obtenu une piste sur un autre forum, mais je ne sais pas comment l'appliquer à mon code et à ce que je souhaite faire :
detectmobilebrowsers.com/

Voila, si vous avez une piste ou La solution, je vous en remercie d'avance.

(function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile');
/* C'est une fonction qui s’exécute immédiatement. 
Le parametre a est :
navigator.userAgent||navigator.vendor||window.opera
Le paramétre b est :
'http://detectmobilebrowser.com/mobile'
Utiliser dans la fonction  :
[b]window.location=b[/b]
 Au lieu d'envoyer à une adresse, lance ta fonction pop up */
Waouw renard13, merci pour ta réactivité. Euh ! concrètement comment dois-je présenter les choses globalement.
Quand tu dis :
a écrit :

Utiliser dans la fonction :
window.location=b
Au lieu d'envoyer à une adresse, lance ta fonction pop up

Tu parles de quelle fonction et où exactement Smiley confused
Désolé, je débute tout juste dans le développement. Merci pour ton temps précieux.
Salut,
en lisant rapidement,je suppose que tu dois mettre
popupCentrer("popup.html", 190, 350, "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no")
à la place de
window.location=b

( et du coup le paramètre b ne sert a rien mais bon .. )
Pas de résultat, je dois être un manche Smiley ohwell .

J'ai remplacé :


(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile');


par :


(navigator.userAgent||navigator.vendor||window.opera,'javascript [langue]opupCentrer("popup.html", 190, 350, "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no")');


Mais rien, j'ai même testé ce que tu propose mathieu1004 et toujours rien.
Une tite idée renard13 Smiley langue

(function(a,b){
       // début de la condition
	if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))
       // Fin de la condition
        {
      // Si la condition est éxecuté alors :
	window.location=b // La tu lance ta fonction pop up => Exemple: popup(argument); Pas besoin d'écrire javascript 
	}
})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile'); // Argument a et b

Si ça ne marche pas, fais voir le code de ta pop up

++++

Edit: ça marche chez moi. Mais j'utilise pas la même fonction pour le pop up.
Modifié par renard13 (31 Jan 2013 - 19:50)
Je peux t'envoyer mes fichiers sources si tu veux par mail ?
En gros mes sources de test avant de l'appliquer à mon site Wordpress,
c'est un fichier html contenant :

<title>Titre de la fenêtre</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="popupdlapp">
	<img src="images/telecharger.jpg" alt="Télécharger l'application" width="190" height="77"/>
    <a href="#"><img src="images/appstore.jpg" alt="Disponible sur l'Appstore" width="190" height="100"/></a>
    <a href="#"><img src="images/android.jpg" alt="Disponible sur l'Android market" width="190" height="104"/></a>
    <a href="#"><img src="images/fermer.jpg" alt="Fermer la fenêtre" width="190" height="69"/></a>
</div>
</body>
</html>


Un autre html avec :

<title>Document sans nom</title>
<script type="text/javascript" src="center.js"></script>
</head>

<body>
<a href='javascript: popupc("popup.html", 190, 350, "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no")'>texte du lien</a>
</body>
</html>


Un css :

a{text-decoration:none;}
#popupdlapp{margin:0 auto; width:190px; background-color:#007394;}


Un js avec une fonction pour centrer la popup :

function popupc(page,largeur,hauteur,options) {
var top=(screen.height-hauteur)/2;
var left=(screen.width-largeur)/2;
window.open(page,"","top="+top+",left="+left+",width="+largeur+",height="+hauteur+","+options);
}


A la base c'est ce que j'ai fait. Les choses se complique pour savoir où placer ton code Smiley ohwell .
Avec ta dernière aide, j'ai donc changer un des html (celui qui contenait le lien) et supprimer le fichier js pour inclure ton code dans la page:


<title>Document sans nom</title>
<script type="text/javascript">

(function(a,b){
       // début de la condition
	if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))
       // Fin de la condition
        {
      // Si la condition est éxecuté alors :
	popupc("popup.html", 190, 350, "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no"); // La tu lance ta fonction pop up => Exemple: popup(argument); Pas besoin d'écrire javascript 
	}
})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile'); // Argument a et b

</script>
</head>

<body>
texte du lien
</body>

Je dois sûrement mal faire les choses, c'est super cool renard13 de prendre de ton temps pour m'aider Smiley smile .
Salut,
Donc voici le fichier html :

<!-- Deux possibilité pour ajouter l'ecouteur au lien_pop
		1 - directement dessus comme ci dessous
		2 - En js => voir code plus bas : mis en commentaire -->
	<a href="#" id="lien_pop" onclick="popup();"> Lien qui permet d'afficher la popup </a>
	<div id="pop">
		<div id="popupdlapp">
			<img src="images/telecharger.jpg" alt="Télécharger l'application" width="190" height="77"/>
			<a href="#"><img src="images/appstore.jpg" alt="Disponible sur l'Appstore" width="190" height="100"/></a>
			<a href="#"><img src="images/android.jpg" alt="Disponible sur l'Android market" width="190" height="104"/></a>
			<a href="#"><img src="images/fermer.jpg" alt="Fermer la fenêtre" width="190" height="69"/></a>
		</div>
	</div>

Le fichier css :

                html{
			height: 100%;
		}
		body{
			height: 100%;
		}
		#pop{
			display: none; /* On cache le pop up par default*/
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			text-align: center; /* Permet de centrer le contenu au milieu de la fenetre.*/
			background-color: rgba(0,0,0,0.6); /*Propriété css3, tu peux aussi mettre une image de 1px png pour simuler la transparence.*/
		}

Le fichier js :

(function(){
// Permet de calculer la hauteur et largeur de la page.
// Fonction @author Erwan Lefèvre =>http://webbricks.org , un super site ou il y a pas mal de fonction.
function winDim() {
	var W,H,
		i = window,
		d = document,
		de = d.documentElement,
		db = d.body;
		
	if ( i.innerWidth ) { // autres que IE
		W = i.innerWidth;
		H = i.innerHeight;
	} else if ( de.clientWidth ) { // IE8
		W = de.clientWidth;
		H = de.clientHeight;
	}
	else { // IE6
		W = db.clientWidth;
		H = db.clientHeight;
	}

	return {w:W, h:H} ;
}
function popup(){
	var elem = document.getElementById('pop');
	// On récupére la taille de la fenetre.
	taille = winDim();
	elem.style.display = 'block'; //On fait aparaitre le pop up.
	// On centre verticalement
	elem = document.getElementById('popupdlapp');
	// On recupere la hauteur de la div popupdlapp (voir offsetHeight) et la taille de la fenetre winDim();
	elem.style.marginTop = (taille.h - elem.offsetHeight)/2+'px';
}
function detection(a){
	if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))){
		popup();
	}
}
// On lance la fonction detection, comme ça si c'est un mobile le popup s'affiche.
detection(navigator.userAgent||navigator.vendor||window.opera);

/* Pour rajouter un ecouteur sur le a 
var elem = document.getElementById('lien_pop');
if(elem.addEventListener){
	elem.addEventListener('click',popup,false); // addEventListener( type evenement, fonction à executer, phase de capture)
}
// Sinon pour IE <9
else{
	elem.attachEvent('onclick', popup);
}
*/
})();


Ensuite tu peux rajouter un evenement sur la div popup pour que quand on click dessus elle repasse à display: none.

PS: Il n'y a pas besoin de faire deux fichiers html. Le popup est masqer avec display none.

++++
Je dis juste "ENORME!!". Je ne te remercierai jamais assez Renard13 pour ton aide, tu m'enlève une épine du pied. J'espère pouvoir un jour t'aider (je ne pense pas en développement mais peut être sur autre chose Smiley confused ).
Encore merci, ça fonctionne comme je l'espérai Smiley ravi , et merci à ce forum réactif (tous ne le sont pas tout le temps).
Tiens j'ai rajouté une anim pour que ce soit plus jolie :
Il faut enlevenr le onclick dans le a, j'utilise la deuxiéme méthode.

(function(){
// Permet de calculer la hauteur et largeur de la page.
// Fonction @author Erwan Lefèvre =>http://webbricks.org , un super site ou il y a pas mal de fonction.
function winDim() {
	var W,H,
		i = window,
		d = document,
		de = d.documentElement,
		db = d.body;
		
	if ( i.innerWidth ) { // autres que IE
		W = i.innerWidth;
		H = i.innerHeight;
	} else if ( de.clientWidth ) { // IE8
		W = de.clientWidth;
		H = de.clientHeight;
	}
	else { // IE6
		W = db.clientWidth;
		H = db.clientHeight;
	}

	return {w:W, h:H} ;
}
function setOpacity(elem, value) {
		elem.style.opacity = value;
		elem.style.filter = 'alpha(opacity=' + value*100 + ')';
		elem.style.MozOpacity = value;
		elem.style.KhtmlOpacity = value;
}
function anim(elem,opa){
	opa+=0.1;
	setOpacity(elem,opa);
	if(opa <=1){
		setTimeout(function(){
			anim(elem,opa);
		},30); // => 30, gére la vitesse de l'animation.
	}
}
function popup(e){
	// Permet de bloquer l'action par default du lien.
	e = e||event;
	if (e.preventDefault) { e.preventDefault(); }
	else { e.returnValue = false;  }
	var elem = document.getElementById('pop');
	var opa = 0;
	// On récupére la taille de la fenetre.
	taille = winDim();
	setOpacity(elem,opa);
	elem.style.display = 'block'; //On fait aparaitre le pop up.
	anim(elem,opa); // permet de faire une apparation en fondu.
	// On centre verticalement
	elem = document.getElementById('popupdlapp');
	// On recupere la hauteur de la div popupdlapp (voir offsetHeight) et la taille de la fenetre winDim();
	elem.style.marginTop = (taille.h - elem.offsetHeight)/2+'px';
	return false;
}
function detection(a){
	if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))){
		popup();
	}
}
// On lance la fonction detection, comme ça si c'est un mobile le popup s'affiche.
detection(navigator.userAgent||navigator.vendor||window.opera);

/* Pour rajouter un ecouteur sur le a */
var elem = document.getElementById('lien_pop');
if(elem.addEventListener){
	elem.addEventListener('click',popup,false); // addEventListener( type evenement, fonction à executer, phase de capture)
}
// Sinon pour IE <9
else{
	elem.attachEvent('onclick', popup);
}
})();


Bonne journée et bonne continuation.

Edit : marche sur tous les navigateur.
Modifié par renard13 (01 Feb 2013 - 11:41)
Merci Renard pour cette MAJ, très classe. Smiley ravi

Note : Je vais me programmer une tite formation auto sur javascript Smiley cligne
Modifié par kiltea (01 Feb 2013 - 12:19)
Merci beaucoup pour ces liens Renard13. J'ai commencé les tutos et c'est intéressant.

Cordialement,

Maïssoum
Bonjour,

Je suis voudrais également ajouter un popup sur mon site mobile dès l'ouverture pour proposer à mon visiteur le téléchargement direct de mon application. Je rencontre quelques soucis dans l'intégration du code que vous avez présenté. En fait mon popup ne s'affiche pas.

Voilà ce que j'ai fait :
J'ai créé un fichier popup.js ou j'ai intégré le code JS que vous proposez et j'ai rajouté dans un fichier html le code HTML proposé mais rien ne se passe....

Je dois rater une étape mais je ne vois pas laquelle...

Pouvez-vous m'aider ? Merci Smiley smile
Modifié par alexius31 (06 Nov 2013 - 15:47)