Comment refactoriser l'utilisation de window.open (…) en une fenêtre dhtml modale discrète?

Question

J'ai une fonction qui lance une fenêtre javascript, comme ceci

    function genericPop(strLink, strName, iWidth, iHeight) {
            var parameterList = "location=0,directories=0,status=0,menubar=0,resizable=no, scrollbars=no,toolbar=0,maximize=0,width=" + iWidth + ", height=" + iHeight;
            var new_window="";

            new_window = open(strLink, strName, parameterList);
            window.self.name = "main";
            new_window.moveTo(((screen.availWidth/2)-(iWidth/2)),((screen.availHeight/2)-(iHeight/2)));
            new_window.focus();
}

Cette fonction est appelée environ 52 fois à différents endroits de mon application Web.

Je souhaite re-factoriser ce code pour utiliser une fenêtre contextuelle modale DHTML. Le changement devrait être aussi discret que possible.

Pour que cette solution reste au même niveau que l'ancienne solution, il faudrait également procéder comme suit

1. Fournissez une poignée pour " Fermer " la fenêtre.
2. Assurez-vous que la fenêtre ne peut pas être déplacée et qu'elle est placée au centre de l'écran.
3. Flouez l'arrière-plan en tant qu'option.

Je pensais que cette solution était la plus proche de ce que je voulais, mais je ne pouvait pas comprendre comment l’incorporer.

Edit: Deux d’entre vous m’ont donné une bonne avance. Je vous remercie. Mais laissez-moi reformuler mon problème ici. Je re-factorise le code existant. Je devrais éviter toute modification du code HTML ou CSS actuel. Idéalement, j'aimerais obtenir cet effet en conservant la signature de fonction de genericPop (...) également.

Answer 1

Voici ma solution utilisant les bibliothèques d’interface utilisateur jQuery et jQuery. Votre API n'est pas modifiée , mais le paramètre 'name' est ignoré . J'utilise iframe pour charger le contenu de strLink puis afficher ce iframe en tant qu'enfant pour générer div , qui est ensuite converti en pop-up modal à l'aide de jQuery:

function genericPop(strLink, strName, iWidth, iHeight) {
  var dialog = $('#dialog');
  if (dialog.length > 0) {
    dialog.parents('div.ui-dialog').eq(0).remove();
  }

  dialog = $(document.createElement('div'))
    .attr('id', 'dialog')
    .css('display', 'none')
    .appendTo('body');

  $(document.createElement('iframe'))
    .attr('src', strLink)
    .css('width', '100%')
    .css('height', '100%')
    .appendTo(dialog);

  dialog.dialog({ 
      draggable: false,
      modal: true, 
      width: iWidth,
      height: iHeight,
      title: strName,
      overlay: { 
          opacity: 0.5, 
          background: "black" 
      } 
  });
  dialog.css('display', 'block');
}

// example of use
$(document).ready(function() {
  $('#google').click(function() {
    genericPop('http://www.google.com/', 'Google', 640, 480);
    return false;
  });
  $('#yahoo').click(function() {
    genericPop('http://www.yahoo.com/', 'Yahoo', 640, 480);
    return false;
  });
});

Documentation sur jQuery UI / Dialog .

Answer 2

J'utilise ce code de dialogue pour faire joli à peu près la même chose.

Si je me souviens bien, l'implémentation par défaut ne prend pas en charge le redimensionnement de la boîte de dialogue. Si vous ne pouvez pas créer avec une seule taille, vous pouvez modifier le code ou le css pour afficher plusieurs largeurs.

l'utilisation est facile:

showDialog('title','content (can be html if encoded)','dialog_style/*4 predefined styles to choose from*/');

Modification du format js pour prendre en charge plusieurs largeurs:

Ajoutez la largeur et la hauteur en tant qu'attributs pour afficher la fonction de dialogue et définissez-les sur les éléments de dialogue et de contenu de dialogue à la ligne 68

Answer 3

Essayez Control.Window , qui nécessite un prototype

.

Voici comment je l'utilise:

<a href="/messages/new" class="popup_window">New Message</a>

Et dans mon fichier Javascript:

$(document).observe("dom:loaded", function() {
  $("a.popup_window").each(function(element) {
    new Control.Modal(element, { overlayOpacity: 0.75, 
                                 className: 'modal',
                                 method: 'get',
                                 position: 'center' });
  });
});

Maintenant, si vous voulez fermer le popup actuellement ouvert, faites:

Control.Modal.current.close()