jQuery Simple Popup Plugin responsive

A propos

mjpopup est un plugin permettant d'afficher n'importe quel type de contenus dans une popup configurable à souhait.

Description :

- Il n'y a pas besoin d'une insertion HTML dans le BODY. Tout se fait à partir de l'appel du plugin.

Sa puissance :

- Optimisé et léger, il peut accepter n'importe quel code css dans sa configuration et contient bon nombre d'autres paramètres.
- mjpopup possède un système de récursivité des paramètres c’est-à-dire que nous pouvons modifier n’importe quel des paramètres sans influer sur les autres.

Une documentation API est disponible dans le zip

Son utilisation

Dans un premier temps, il est nécessaire comme dans tout plugin de faire l'appel du plugin.
Eh bien oui ! Personne n'y échappe.
mjpopup possède une dépendance à un autre plugin qui est cookie.js. Me direz vous..."Pourquoi ne pas l'inclure dans ton plugin ?"... "héhé oui je le pourrai"..."mais non je ne le ferai pas ! Car il y a un avantage et un inconvénient de taille..."
L'avantage est que j'ai un seul fichier javascript si je mets tout dedans. Le désavantage est que le plugin cookie ne pourra pas être mis à jour facilement si je l'inclus dans mon code. Je créé donc une forte dépendance en l'incluant.
Ou alors, je créé mon propre plugin de cookie. Mais ce serait inutile étant donné qu'un plugin cookie stable existe déjà. Et puis...pourquoi réinventer la roue quand elle existe ?
Donc cookie.js est un plugin parfaitement stable et facile d'utilisation.
Bon je vais encore faire ma mauvaise langue...
"ok !! d'accord !! Pour réinventer la roue...mais ton plugin de popup il en existe des tas ?"
Oui effectivement !!
Durant mon travail, j'ai eu à faire à des tas de plugin avec des popup. En majorité des pseudo plugin comme je les appel ou communément dit des codes à la volé.
CE N'EST PAS DU TOUT PROPRE...A BANNIR !! et je reste formel.
N'avez-vous donc jamais trouvé un plugin de popup suffisamment stable et facilement customisable ?
Pour ma part non !
Eh ben nous y voilà...mjpopup a été créé ! ^^
Je pense que s'armer d'outils compétents n'est pas plus mal en soit et plus rapide à mettre en place dans un site.
Bon revenons à nos moutons :
Soit le code suivant à insérer entre les balises <head></head> :


			
<!-- APPEL DE LA BIBLIOTHEQUE -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<!-- APPEL DE MJPOPUP -->
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/mjpopup.min.1.0.0.js"></script>

<!-- UTILISATION DU PLUGIN -->
<script type="text/javascript">
//...utilisation de mjpopup
</script>

Un appel simple avec son exemple


			
jQuery(document).ready(function() {
	jQuery(this).mjpopup();
});

Cliquer ici pour voir l'exemple

Un appel plus complet en changeant la popup, l'overlay et le bouton close.



jQuery(document).ready(function() {
	jQuery(this).mjpopup({
		//active debug
		'debug' : false,
		//click or no
		'onClick': {
			'active' : false,
			'class' : 'showPopup'
		},
		//cookie
		'cookie' : {
			'active' : false,
			'name' : 'mjpopup',
			'time' : 1
	  	},
		//create overlay
		'overlay': {
			'class': 'popup_overlay',
			'closeOnClick': true,
			'css': {
				'background' : 'url(img/overlay1.png)',
				'backgroundRepeat' : 'repeat',
				'zIndex' : 999,
				'width' : '100%',
				'position' : 'absolute',
				'top' :0,
				'height' : jQuery(document).height()
			}
		},
		//create div popup
		'popup': {
			'class': 'popup_div_view',
			'width': 940,
			'height': 538,
			'css': {
				'borderWidth': 8,
				'borderColor': '#D0D0D0',
				'borderStyle': 'solid',
				'borderRadius': '6px 0px 6px 6px',
				'float' : 'left',
				'height' : '500px',
				'position' : 'relative',
				'zIndex' : 999999
			},
			'htmlpopup' : '<img src="img/mjpopup.jpg" />'
		},
		//close button
		'close': {
			'text' : 'fermer',//string and One word
			'class' : 'close',
			'EscClose': true,
			'css': {
				'color' : 'black',
				'display' : 'block',
				'float' : 'right',
				'padding' : '4px 9px', //px or em
				'backgroundColor' : '#D0D0D0',
				'fontSize' : '12px', //px
				'borderRadius' : '2px 2px 0 0',
				'textTransform' : 'uppercase',
				'fontWeight' : 'bold',
				'cursor' : 'pointer',
				'zIndex' : 999999
			}
		},
		//effect appearance/disappearance for background
		'effect': {
			'bgIn': 'fade',
			'bgTime' : 800,
			'bgOut' : 'fade',
			'popupIn' : 'slide',
			'popupTime' : 1000,
			'popupOut' : 'slide'
		}
	});
});

Cliquer ici pour voir l'exemple

Le mode Debug

Ce mode permet de savoir ou se trouve l'erreur dans votre code jQuery. Voici comment activer le mode debug.


			
jQuery(document).ready(function() {
	jQuery(this).mjpopup({
		//active debug
		'debug' : true,
		//click or no
		'onClick': {
			'active' : true,
			'class' : 'showPopup'
		},
		//create div popup
		'popup': 
		{
			'width': 'fezfz', <= voici l'erreur
			'height': 365,
			'htmlpopup' : '<img src="img/mjpopup1.jpg" />',
			'css':
			{
				'height' : '365px',
				'width': '940px'
			}
		}
	});
});

Cliquer ici pour voir un bug ^^