Wie verwenden window.open (...) zu einem unauffälligen modal DHTML Fenster Refactoring?

Question

Ich habe eine Funktion, die ein Javascript-Fenster startet, wie dies

    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();
}

Diese Funktion ist etwa 52-mal aus verschiedenen Orten in meiner Web-Anwendung aufgerufen.

Ich möchte diesen Code erneut Faktor ein DHTML modalen Popup-Fenster zu verwenden. Die Änderung sollte so unauffällig wie möglich sein.

Um diese Lösung zu pari zu halten mit der alten Lösung, ich denke auch das folgende

tun müssen, würde

1. Geben Sie einen Griff auf "Schließen" das Fenster.
2. Stellen Sie sicher, das Fenster kann nicht verschoben werden, und ist in der Mitte des Bildschirms positioniert.
3. Blur den Hintergrund als Option erhältlich.

Ich dachte, diese Lösung in der Nähe von ist, was ich will, aber ich konnte nicht verstehen, wie zu übernehmen es.

Edit: Ein paar von euch hat mir eine gute Führung gegeben. Danke. Aber lassen Sie mich wieder sagen, mein Problem hier. Ich bin Refactoring vorhandenen Code. Ich sollte jede Änderung der vorliegenden HTML oder CSS vermeiden. Im Idealfall würde Ich mag diesen Effekt erreichen, indem die Funktion Unterschrift des genericPop (...) wie auch zu halten.

Answer 1

Hier ist meine Lösung mit jQuery und jQuery UI-Bibliotheken. Ihre API wird nicht geändert , aber Parameter 'name' wird ignoriert . Ich benutze iframe aus gegebenen strLink Inhalt zu laden und dann als Kind erzeugen iframe dass div anzuzeigen, die dann zum modalen Pop-up-konvertiert wird mit 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;
  });
});

Dokumentation für jQuery UI / Dialog .

Answer 2

Ich benutze diesen Dialog Code recht zu tun viel die gleiche Sache.

Wenn ich richtig die Standardimplementierung erinnere unterstützt nicht den Dialog Ändern der Größe. Wenn Sie mit nur einer Größe machen kippe können Sie den Code oder CSS ändern mehrere Breiten angezeigt werden soll.

Nutzung ist einfach:

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

die js Ändern mehrere Breiten unterstützen:

Breite und Höhe als Attribut hinzufügen Dialogfunktion zu zeigen, und die Set sie den Dialog und Dialog-Inhaltselemente auf der Leitung 68

Answer 3

Versuchen Sie Control.Window , die Prototype erfordert

Hier ist, wie ich es verwenden:

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

Und in meiner Javascript-Datei:

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

Nun, wenn Sie die aktuell geöffnete Pop-up schließen möchten tun:

Control.Modal.current.close()