Différents Codes pour Modal Dialog Jquery

Introduction

Dans cette page sont regroupés différents codes de boite modal Jquery UI

Ces blocs de code sont pour des situations différentes pour afficher des informations différentes. Pour l'utilisation de ces boites modales utilisez le sélecteur, ou mettez le vôtre, l'appel de ces boites modales se font via le sélecteur, qui peut être une classe ou un id, issus d'un lien, d'un bouton etc.

Visionner un document PDF

         $(document).ready(function () {
            $('a.pdfview').on('click', function (e) {
                e.preventDefault();
                var pagetitle = $(this).attr("title");
                var $dialog = $('<div></div>')
                .html('<iframe height="600px" src="PDFJS/pdf.js-gh-pages/web/viewer.html?file='+$(this).attr('href')+'" width="100%"></iframe>')          
                .dialog({
                    autoOpen: false,
                    modal: true,
                    height: "auto",//550
                    width: 600,
                    show: "slide",
                    hide: "fade",
                    resizable: false,
                    title: pagetitle,
                buttons: {
                    "Fermer": function() {
                    $( this ).dialog( "close" );
                    }
               },
               open: function() {
                    $('.ui-dialog-buttonpane')
                    .find('button:contains("Fermer")')
                    .removeClass('ui-button-text-only')
                    .addClass('ui-button-text-icon-primary')
                    .prepend('<span class="ui-icon ui-icon-document"></span>');
                  }
        
                });
                $dialog.dialog('open');
            });
        });//fin ready
        

Visionner un fichier texte

        $(document).ready(function () {
			$('a.txt_user').on('click', function (e) {
                e.preventDefault();
                var page = $(this).attr("data-href");
                var pagetitle = $(this).attr("data-href").substring(8);
                var $dialog = $('<div></div>')
				.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>').dialog({
                    autoOpen: false,
                    modal: true,
                    width: 800,
                    height: 600,
                    show: "slide",
					hide: "fade",
					resizable: false,
					draggable: false,
                    title: pagetitle,
					buttons: {
						  "Fermer": function() {
							  $( this ).dialog( "close" );
						  }
					}
					
                });
                $dialog.dialog('open');
            });
        });
        

NOTA : Ce code est parfait pour l'affichage d'un fichier texte, mais si vous proposez comme moi le téléchargement de ces dit fichier, il faut empêcher la sélection et la copie, afin de ne pas fausser le hit de téléchargement, ce qui en fait force l'utilisateur à le télécharger après l'avoir visionné. Pour cela, remplacer l'iframe par un textarea en disabled que vous metterez en forme via css.

Visionner des images

          $(document).ready(function () {
              var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>');
              var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({
                  autoOpen: false,
                  modal: true,
                  resizable: false,
                  width: "auto",
                  height: "auto",
                  show: "slide",
                  hide: "fade",
                  buttons: {
                      "Fermer": function() {
                      $( this ).dialog( "close" );
                      }
                  },
                  close: function () {
                      iframe.attr("src", "");
                  },
                  
                  open: function() {
                    $('.ui-dialog-buttonpane')
                    .find('button:contains("Fermer")')
                    .removeClass('ui-button-text-only')
                    .addClass('ui-button-text-icon-primary')
                    .prepend('<span class="ui-icon ui-icon-image"></span>');
                  }
                  
              });
              $("a.thumb ").on("click", function (e) {
                  e.preventDefault();
                  var src = $(this).attr("href");
                  var title = $(this).attr("data-title");
                  var width = $(this).attr("data-width");
                  var height = $(this).attr("data-height");
                  iframe.attr({
                      width: +width,
                      height: +height,
                      src: src
                  });
                  dialog.dialog("option", "title", title).dialog("open");
              });
          });//fin ready		
        

Utilisation

Pour utiliser cette boite modale qui s'adapte à l'image il faut utiliser (getimagesize) de php

$img = $includeurl.$leadon.$filename; //chemin de votre image
$dim = getimagesize($img);
echo'<a class="thumb" href="'.$includeurl.$leadon.$filename.'" data-title="'.$filename.'" data-width="'.$dim[0].'" data-height="'.$dim[1].'">&nbsp;</a>';

Visionner une vidéo en HTML 5

        $(document).ready(function () {
			$('a.flv').on('click', function (e) {
                e.preventDefault();
                var page = $(this).attr("href");
                var pagetitle = $(this).attr("href");
				var width = $(this).attr("data-width");
				var height = $(this).attr("data-height");
                var $dialog = $('<div></div>')
	.html('<center><video width='+width+' height='+height+' controls="controls"><source src='+page+' type="video/mp4" /></video></center>
').dialog({
	
                    autoOpen: false,
                    modal: true,
                    width: "auto",
                    height: "auto",
                    //show: "slide",
					//hide: "fade",
					resizable: false,
                    title: pagetitle,
					
					buttons: {
						  "Fermer": function() {
							  $( this ).dialog( "close" );
						  }
					}
                });
                $dialog.dialog('open');
            });
        });
        

Visionner une vidéo en Flash

        $(document).ready(function () {
			$('a.flv').on('click', function (e) {
                e.preventDefault();
                var page = $(this).attr("href");
                var pagetitle = $(this).attr("href");
				var width = $(this).attr("data-width");
				var height = $(this).attr("data-height");
                var $dialog = $('<div></div>')
	.html('<center><object type="application/x-shockwave-flash" data="dewtube.swf" width="512" height="384"><param name="movie" value="dewtube.swf"><param name="flashvars" value="movie='+ page + '&width=512&height=384"></object></center>').dialog({
                    autoOpen: false,
                    modal: true,
                    width: "auto",
                    height: "auto",
                    //show: "slide",
					//hide: "fade",
					resizable: false,
                    title: pagetitle,
					
					buttons: {
						  "Fermer": function() {
							  $( this ).dialog( "close" );
						  }
					}
                });
                $dialog.dialog('open');
            });
        });
        

Fermer la boite modal en cliquant n'importe d'où.

          $(document).ready(function () {
            $(document.body).on("click", ".ui-widget-overlay", function()
                {
                    $.each($(".ui-dialog"), function()
                    {
                        var $dialog;
                        $dialog = $(this).children(".ui-dialog-content");
                        if($dialog.dialog("option", "modal"))
                        {
                            $dialog.dialog("close");
                            $dialog.empty();//permet de vider la modal dialog lors d'un rappel d'un 2éme clic
                        }
                    });
                });;
          });					
        

Visionner des vidéos Youtube ou Dailymotion

        $(document).ready(function () {
			$('.view a').on('click', function (e) {
                e.preventDefault();
                var page = $(this).attr("href");
                var pagetitle = $(this).attr("href");
				var width = $(this).attr("data-width");
				var height = $(this).attr("data-height");
                var $dialog = $('<div></div>')
				.html('<iframe width='+width+' height='+height+' src='+page+' frameborder="0" allowfullscreen></iframe>').dialog({
                    autoOpen: false,
                    modal: true,
                    width: "auto",
                    height: "auto",
                    show: "slide",
					hide: "fade",
					resizable: false,
                    title: pagetitle,
					
					buttons: {
						  "Fermer": function() {
							  $( this ).dialog( "close" );
						  }
					}
                });
                $dialog.dialog('open');
            });
        });
        

Utilisation

Pour visionner une vidéo Youtube ou Dailymotion ou autre, vos liens doivent avoir la structure suivante:

Ici dans une liste, sinon pour un lien seul attribuer la classe (view) au lien.

<div class="view">
<ul>
<li><a href="http://www.youtube.com/embed/b4mnFExyAm8" data-title=" How to display YouTube videos in modal dialog" data-width="560" data-height="360"><img src="http://i1.ytimg.com/vi/b4mnFExyAm8/default.jpg" /></a></li>
</ul>
</div>

L'attribut (href) défini le lien de la vidéo
L'attribut (data-title) représente le titre de la vidéo
L'attribut (data-width) représente la largeur de la vidéo
L'attribut (data-height) représente la hauteur de la vidéo

Modal Dialog Auto Close

           $( "#dialog" ).dialog({
            show: "fade",
            hide: "fade",
            buttons: [],
            open: function(event, ui) {
              var dlg = $(this);
              setTimeout(function(){
                  dlg.dialog("close");
                  },
                  3000); 
                  },
            
            modal: true,
            opacity: 1
          });
          
          $( "button" ).click(function() {
                      $( "#dialog" ).dialog( "open" );
                     
          });       
        

Confirm Modal Dialog Suppression avec une ou des checkboxs

Ce script permet d'afficher une boite modal JQuery de confirmation de suppression de données après avoir coché une ou plusieurs checkboxs

Imaginez que vous ayez un tableau, que devant chaque enregistrements (données dynamiques) vous ayez une checkbox permettant d'être supprimé

Voici le code JavaScript, ce que vous devez changer et le sélecteur (#selectAll), puis le nom de la page et le nom du tableau de checkbox ($.post("supp_lire_message.php", { 'supprimer[]': data }) qui recevra ce script, puis le sélecteur id du formulaire (#form1), puis le nom de la case à cocher ($('input[name="supprimer"]'))

           $(function() {
              /*Select all inputs and swap text*/
              $("#selectAll").click(function () { //user clicks on select all checkbox
                  /*Lets first swap label text*/
                  var $this = $("label[for='select_all']");
                  var ctext = $this.text();//grab curent text
                  var stext = $this.data('text-swap');//swap text
                      $this.text(stext).data('text-swap', ctext);//swap back
                  
                  var checked_status = this.checked; //assign variable 
                  $('input[name="supprimer"]').each(function () { //for each checkbox
                      this.checked = checked_status; //tick the boxes
                  });
              }); //end
                
                    $("#form1").submit(function(e) {
                    return false;       });
          
              var $dialog = $('<div></div>')
                  .html('E-mail(s) ont été supprimés avec succés')
                  .dialog({
                      autoOpen: false
                  });
              var $dialog2 = $('<div></div>')
                  .html('<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span> Veuillez cocher une ou des Checkboxes!')
                  .dialog({
                      autoOpen: false,
                      title: 'Erreur !'
                  });
          
               $("#deleteBtn").click(function() {
               if ($('input[type=checkbox]').is(':checked')){
                  $( "#dialog-confirm" ).dialog({
                          modal: false,
                                buttons: {
                                      "Supprimer": function() {
                                        $(this ).dialog( "close" );
                                                  var data = $(":checkbox:checked").map(function(i,n)
                                                        {
                                                          return $(n).val();
                                                      }).get();
                                                            $.post("supp_lire_message.php", { 'supprimer[]': data },
                                                             function(){
                                                                          $('body').load('lire_message.php', function() {
                                                                            $dialog.dialog({title: 'E-mail(s) Supprimés'});
                                                                            setTimeout(function(){$dialog.dialog("close")},5000);
                                                                            });
                                                                      });
                  },
                  Annuler: function() {
                    $( this ).dialog( "close" );
                    return false;
                  }
                } //end buttons
              });
              }
              else
              {
                   $dialog2.dialog("open");
              }
             });
          });
       
        

        /*code de la checkbox se trouvant devant chaque enregistrement*/
         <input name="supprimer[]" type="checkbox" id="supprimer" value="<?php echo $row_RsMessage['idmessage']; ?>" /> 
         /*Code de la page appelée par $post*/
            <?php
            require_once('security.php');
            require ('config/cnxPDO.php');
            try
            {
                foreach ($_POST['supprimer'] as $value)
                {
                  $query_delete = "DELETE FROM free_m_messages WHERE idmessage='$value'";
                  $query = $PDO->prepare($query_delete);
                  $query->execute();
                }
            }
            catch(PDOException $e) {
                      $msg = 'ERREUR PDO dans ' . $e->getFile() . ' L.' . $e->getLine() . ' : ' . $e->getMessage();
                      die($msg);
                    }
            $PDO = NULL;
            ?>     
        

         /*code à insérer dans l'entête du tableau*/
         <label data-text-swap="Déselectionner tout" for="select_all" class="inline bold">Sélection tout</label><br><input type="checkbox" id="selectAll" name="supprimer[]"  />
         /*Code du bouton à insérer dans le footer du tableau*/
         <input type="submit" id="deleteBtn" value="Supprimer" name="deleteBtn" icon="ui-icon-trash" />
         /*Code de la boite modal à insérer après le tableau*/
         <div id="dialog-confirm" title="Supprimer un ou des message(s)?" style="display:none;">
                <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">nbsp;</span>
                Etes vous sur de vouloir supprimer ce ou ces message(s) ?</p>
         </div>
        

Confirmation suppression modal dialog

Cette boite modal de confirmation de suppression avec customisation des boutons et barre de titre dans une autre couleur autre que le thème utilisé

Dans le code ci-dessous la barre de titre et les boutons seront de couleur rouge.

            $(document).ready(function() {
                $("#dialog").dialog({
                    modal: true,
                    width: 400,
                    height: 200,
                    autoOpen: false,
                });
            
            
                $(".suppmb").click(function(e) {
                    e.preventDefault();
                    var theHREF = $(this).attr("href");
                    var idm = $(this).attr("data-id");
                    var pseudo = $(this).attr("data-pseudo");
                    var avatar = $(this).attr("data-avatar");
                    
                    $("#dialog").html('Etes vous sur de vouloir supprimer ce membre ?<br><b> N° </b>' + idm + '<br><b>Pseudo : </b>' + pseudo + '<br><b> Avatar : </b><img src="../images/avatar/'+avatar+'" align="absmiddle">');
                    
                    $("#dialog").dialog('option', 'buttons', {
                        "Confirmer" : function() {
                            window.location.href = theHREF;
                        },
                        "Annuler" : function() {
                            $(this).dialog("close");
                        }
                    });
                    $("#dialog").dialog("open");
                    $(".ui-dialog").find(".ui-dialog-titlebar").css("background", "#ebcccc");
                    $(".ui-dialog").find('.ui-button').css("background", "#ebcccc");
                });
            
            });
 		

Pour appeler cette boite de dialog avec les paramètres définis dans les variables du script en utilisant l'attribut (data-)

Ce lien fait référence à la gestion des membres dans l'espace membre

On y récupére via l'attribut (data-), l'id du membre, son pseudo, et son avatar.

Le changement de couleur hexa se fait dans les 2 dernières lignes du script javascript.

 		<a class="suppmb" href="supp_membre.php?id_membre=<?php echo $row_RsMembre['id_membre']; ?>" data-id="<?php echo $row_RsMembre['id_membre']; ?>" data-pseudo="<?php echo $row_RsMembre['pseudo']; ?>" data-avatar="<?php echo $row_RsMembre['avatar']; ?>">click</a>
 		

Dans le même genre d'idée que j'ai inventé on peut utiliser les boites modales JQuery pour en faire des boites modales de notifications avec des couleurs différentes.

confirm

Modifier la couleur de barre de titre

$("#dialog").closest(".ui-dialog").find(".ui-dialog-titlebar").css("background", "#ebcccc");

Modifier la couleur des boutons

$("#dialog").closest(".ui-dialog").find(".ui-button").css("background", "#ebcccc");

Modifier l'icône (Close)

$("#dialog").closest(".ui-dialog").find(".ui-dialog-titlebar-close").css({'background-image': 'url(images/closes.png)', 'width': "16px", 'height': "16px", 'background-repeat': "no-repeat", 'background-position': "center center"});

$('.ui-icon').css('display','none');

Renommer le texte d'un bouton

$('.ui-dialog-buttonpane button:contains(Confirmer)').attr("id", "dialog-confirm_ok-button");

$('#dialog-confirm_ok-button').html("Supprimer le membre " + pseudo).css("padding", "4px");

Modifier la couleur d'un seul bouton

$('.ui-dialog-buttonpane button:contains(Confirmer)').attr("id", "dialog-confirm_ok-button");

$('#dialog-confirm_ok-button').css("background", "#8dff37");

Echange de données entre boite modale et la page mère

Cette boite modale pour l'exemple affiche une liste de dossier, après avoir sélectionné le répertoire, ce dernier s'affiche dans un champ texte de la page mère

Pour le fonctionnement, la librairie JQuery et JQuery UI et CSS sont nécessaires.

Tous les scripts ci-dessous devront être implémenté dans une seule page.

          $(function() {
              var dialog = $("#dialog" ).dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                     "Valider": addUser,
                      "Annuler": function() {
                          dialog.dialog( "close" );
                      }
                },
                close: function() {
                 $(this).dialog("close");
                },
                open: function(event, ui) {
                    $('.ui-dialog-buttonpane')
                    .find('button:contains("Valider")')
                    .removeClass('ui-button-text-only')
                    .addClass('ui-button-text-icon-primary')
                    .prepend('<span class="ui-icon ui-icon-disk"></span>');
                    
                    $('.ui-dialog-buttonpane')
                    .find('button:contains("Annuler")')
                    .removeClass('ui-button-text-only')
                    .addClass('ui-button-text-icon-primary')
                    .prepend('<span class="ui-icon ui-icon-cancel"></span>');
                    
                }
              });
          
              $( "#list_a_id" ).on( "click", function() {
                dialog.dialog( "open" );
              });
          
               function addUser(){
                   var selectedItem = $("#myselect option:selected" ).text();
                  $("#list_input_id").val(selectedItem);
                    dialog.dialog( "close" );
               }
            });
        

Dans le body

            <form action="select_liste.php" id="milk_form">
            <input type="text" name="list_input_name" id="list_input_id" class="list_input_class" value="">
            <input type="button" id="list_a_id" data-target="#list_modal" data-toogle="modal" value="Parcourir">
            </form>
            <div id="dialog">
            <?php
            function afficheSelect($it,$name) {
            
             echo "<select id=\"myselect\" name=\"$name\">\n";
            
             // pour chaque entree du repertoire
             for( ; $it->valid(); $it->next()) {
            
                // si c'est un repertoire et si ce n'est pas "." ou ".."
                if($it->isDir() && !$it->isDot()) 
                   printf("\t<option value=\"%s\">%s</option>\n", $it->getFilename(), $it->getFilename());
            
             }
            
             echo "</select>\n";
            }
            afficheSelect(new DirectoryIterator('../'),'select1');
            ?>
            </div>