Plugin dvjhDialogModal

"Auteur : Hagnoul Daniel"

Texte : v1.0.0 2013-01-14

Dialogue modal.

Par défaut, le dialogue affiche un titre, un message et un bouton d'annulation.

Le dialogue peut afficher : une division éditable (contenteditable), un formulaire (form) et des boutons.

Téléchargement ftp : jquery.dvjhDialogModal-1.0.0.js

Téléchargement https : jquery.dvjhDialogModal-1.0.0.js

Ouverture du dialogue modal par défaut lors de l'affichage de la page.

Code :

$( window ).load( function(){
	$.dvjhDialogModal({
		"boutons" : {
			"OK" : function(){
				$.dvjhNotify({
					backgroundColor: "#F5F5F5",
					textHTML: "Vous avez accepté la proposition ! <br/>" +
						new Date( ).toLocaleString(),
					delay: 5000
				});
				
				console.log( arguments );
			}
		}
	});
});

Il y a un gestionnaire d'événement "click" sur chaque bouton.

Avant de détruire le dialogue et le voile noir il appelle la fonction associée au bouton en lui transmettant 4 arguments : obj( event, strEditable, strSerialize, serializeArray );.

• event : l'événement "click"
• strEditable : "" ou le texte contenu dans la division éditable
• strSerialize : "" ou le résultat de $( "form" ).serialize()
• serializeArray : "" ou le résultat de la méthode $( "form" ).serializeArray()

Test n° 1 : animation, oui ou non ?

Code :

$( "#btn1" ).on( "click", function(){
	$.dvjhDialogModal({
		"titre" : "Cacher un élément du DOM",
		"message" : "Voulez-vous cacher le titre ?",
		"boutons" : {
			"Oui" : function(){
				$( "#titre" ).fadeOut( 3000 );
				
				setTimeout( function(){
					$( "#titre" ).fadeIn( 3000 );
				}, 10000 );
				
				console.log( arguments );
			},
			"Non" : function( event ){
				$.dvjhNotify({
					backgroundColor: "#F5F5F5",
					textHTML: "Vous avez refusé ! <br/>" + new Date( ).toLocaleString(),
					delay: 5000
				});
				
				console.log( arguments );
			}
		}
	});
});

Test n° 2 : question, division éditable.

Code :

$( "#btn2" ).on( "click", function(){
	$.dvjhDialogModal({
		"titre" : "Division éditable",
		"message" : "Donnez votre opinion ci-dessous :",
		"editable" : true,
		"boutons" : {
			"OK" : function(){
				$.dvjhNotify({
					backgroundColor: "#F5F5F5",
					textHTML: arguments[1],
					delay: 5000
				});
				
				console.log( arguments );
			}
		}
	});
});

Test n° 3 : question, formulaire.

Cet exemple utilise volontairement plusieurs manières de donner du style au formulaire et à ses éléments.

Code :

<style>
	.monFormulaire fieldset { border: 1px dotted grey; }
	.monFormulaire input { display: block; margin: 12px; padding: 6px; }
</style>
<script>
	var jObjForm = $( "<form/>", {
		"class" : "monFormulaire",
		"html" : '<fieldset>' +
				 '<input name="pays" placeHolder="Votre pays ?">' +
				 '<input name="celsius" placeHolder="Température ?">' +
				 '</fieldset>',
		"css" : {
			"margin" : "12px",
			"padding" : "6px"
		}
	});
	
	$( "#btn3" ).on( "click", function(){
		$.dvjhDialogModal({
			"titre" : "Bienvenue !",
			"message" : "Il fait froid ici et chez vous ?",
			"form" : jObjForm,
			"boutons" : {
				"Oui" : function(){
					$.dvjhNotify({
						backgroundColor: "#F5F5F5",
						textHTML: "Brrr, il fait froid (" +
							arguments[3][1].value +
							" °C) en " +
							arguments[3][0].value + " !",
						delay: 5000
					});
					
					console.log( arguments )
				},
				"Non" : function(){
					$.dvjhNotify({
						backgroundColor: "#F5F5F5",
						textHTML: "Il fait bon (" +
							arguments[3][1].value +
							" °C) en " +
							arguments[3][0].value + " !",
						delay: 5000
					});
					
					console.log( arguments );
				}
			}
		});
	});
</script>

Code du plugin :

/*
 * Daniel Hagnoul
 * 
 * Plugin jquery.dvjhDialogModal-1.0.0.js
 *
 * Code v1.0.0 2013-01-13
 *
 * Le plugin affiche un dialogue modal.
 * 
 * Par défaut, le dialogue affiche un titre, un message
 * et un bouton d'annulation.
 *
 * Le dialogue peut afficher : une division
 * éditable (contenteditable), un formulaire (form) et
 * des boutons.
 *
 * Voir les exemples sur :
 * https://danielhagnoul.developpez.com/MonCaEx/plugin-dvjh/dialogModal/dialogModal.php
 */
(function($){
	$.dvjhDialogModal = function( options ){
		var opts = $.extend( true, {}, $.dvjhDialogModal.defaults, options ),
			jObjDialog = $( "<div/>", {
				"id" : $.now(),
				"css" : opts.objCSSDialogModal,
				"html" : '<h1 class="dialogTitre">' + opts.titre + '</h1>' +
						 '<div class="dialogBox">' +
						     '<div class="dialogMessage">' + opts.message + '</div>' +
						     '<div class="dialogForm"></div>' +
						     '<div class="dialogButtons"></div>' +
						 '</div>'
			}).appendTo( "body" ),
			jObjVoileNoir = $( "<div/>", {
				"css" : opts.objCSSVoileNoir
			}).appendTo( "body" ),
			jObjDialogTitre = $( ".dialogTitre", jObjDialog ),
			jObjDialogMessage = $( ".dialogMessage", jObjDialog ),
			jObjDialogBox = $( ".dialogBox", jObjDialog ),
			jObjDialogForm = $( ".dialogForm", jObjDialog ),
			jObjDialogButton = $( ".dialogButtons", jObjDialog ),
			jObjDialogEditable = null,
			jObjForm = null,
			tabIndex = 0;
			
		$.each( opts.boutons, function( key, obj ){
			$( "<button/>", {
				"tabIndex" : ++tabIndex,
				"css" : opts.objCSSDialogButton,
				"text" : key,
				"click" : function( event ){
					var strEditable = "",
						strSerialize = "",
						serializeArray = [];
					
					if ( jObjDialogEditable ){
						strEditable = jObjDialogEditable.text();
					}
					
					if ( jObjForm ){
						strSerialize = jObjForm.serialize();
						serializeArray = jObjForm.serializeArray();
					}
						
					obj( event, strEditable, strSerialize, serializeArray );
					
					jObjDialog.remove();
					jObjVoileNoir.remove();
				}
			}).appendTo( jObjDialogButton )
		});
		
		if ( opts.editable ){
			jObjDialogForm
				.append( '<div class="dialogEditable" contentEditable></div>' );
				
			jObjDialogEditable = $( ".dialogEditable", jObjDialog );
			
			jObjDialogEditable.attr( "tabIndex", ++tabIndex );
		}
		
		/*
		 * L'objet jQuery doit contenir un élément "<form>".
		 */
		if ( opts.form != null && opts.form[0].tagName == "FORM"  ){
			jObjDialogForm
				.attr( "tabIndex", ++tabIndex )
				.append( opts.form );
				
			jObjForm = $( "form", jObjDialog );
		}
		
		jObjDialogTitre.css( opts.objCSSDialogTitre );
		jObjDialogBox.css( opts.objCSSDialogBox );
		jObjDialogMessage.css( opts.objCSSDialogMessage );
		jObjDialogForm.css( opts.objCSSDialogForm );
		
		if ( jObjDialogEditable ){
			jObjDialogEditable.css( opts.objCSSDialogEditable );
		}
		
		/*
		 * Le dialogue modal doit avoir sa taille définitive 
		 * avant le calcul de outerHeight et de outerWidth
		 */
		jObjDialog.css({
			"margin-top" :  -jObjDialog.outerHeight(true)/2,
			"margin-left" : -jObjDialog.outerWidth(true)/2
		}).fadeIn( 800 );
		
		$( "[tabIndex='1']" ).trigger( "focus" );
		
		jObjVoileNoir.fadeIn( 500 );
	};
	
	$.dvjhDialogModal.defaults = {
		"objCSSVoileNoir" : {
			"position" : "fixed",
			"display" : "none",
			"left" : 0,
			"top" : 0,
			"width" : "100%",
			"height" : "100%",
			"opacity" : "0.75",
			"filter" : "alpha(opacity=80)",
			"background" : "gray",
			"zIndex" : 99998
		},
		"objCSSDialogModal" : {
			"position" : "fixed",
			"display" : "none",
			"top" : "50%",
			"left" : "50%",
			"min-width" : "300px",
			"max-width" : "600px",
			"zIndex" : 99999,
			"padding" : "6px",
			"text-align" : "left",
			"fontSize" : "12px",
			"background" : "#fff",
			"border" : "20px solid #ddd",
			"boxShadow": "0px 0px 20px #000",
			"borderRadius" : "10px"
		},
		"objCSSDialogTitre" : {
			"text-align" : "center"
		},
		"objCSSDialogBox" : {
			"text-align" : "left",
			"padding" : "6px"
		},
		"objCSSDialogMessage" : {
			"text-align" : "justify",
			"padding" : "6px",
			"-moz-hyphens" : "auto",
			"-webkit-hyphens" : "auto",
			"-ms-hyphens": "auto",
			"-o-hyphens": "auto",
			"hyphens": "auto"
		},
		"objCSSDialogForm" : {
			"text-align" : "left",
			"padding" : "6px"
		},
		"objCSSDialogEditable" : {
			"padding" : "6px",
			"height" : "60px",
			"overflow" : "auto",
			"border" : "1px solid orange",
			"-moz-hyphens" : "auto",
			"-webkit-hyphens" : "auto",
			"-ms-hyphens": "auto",
			"-o-hyphens": "auto",
			"hyphens": "auto"
		},
		"objCSSDialogButton" : {
			"margin" : "6px",
			"padding" : "6px",
			"float" : "right"
		},
		"titre" : "Titre du message",
		"message" : "<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis\
					praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint\
					occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia\
					animi, id est laborum et dolorum fuga.</p>",
		"editable" : false, // true ou false
		"form" : null, // un objet jQuery contenant un formulaire ou null
		"boutons" : {
			"Annuler" : function(){}
		}
	};
})(jQuery);

À bientôt !

 

Veuillez poser vos questions
techniques sur les forums DVP,
s'il vous plait.

Vous n'aurez jamais fini d'apprendre la programmation, aussi apprenez à apprendre en vous amusant.