Come refactoring dall'uso di window.open (...) in una finestra dhtml modale discreta?

Question

Ho una funzione che avvia una finestra javascript, come questa

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

Questa funzione viene chiamata circa 52 volte da luoghi diversi nella mia applicazione Web.

Voglio ricodificare questo codice per utilizzare una finestra pop-up modale DHTML. Il cambiamento dovrebbe essere il più discreto possibile.

Per mantenere questa soluzione alla pari con la vecchia soluzione, penso che dovrei anche fare quanto segue

1. Fornisci un handle per " Chiudi " la finestra.
2. Assicurati che la finestra non possa essere spostata e che sia posizionata al centro dello schermo.
3. Sfoca lo sfondo come opzione.

Ho pensato che questa soluzione è la più vicina a ciò che voglio, ma io non riuscivo a capire come incorporarlo.

Modifica: un paio di voi mi hanno dato un buon vantaggio. Grazie. Ma permettimi di riaffermare il mio problema qui. Sto reinventando il codice esistente. Dovrei evitare qualsiasi modifica al presente HTML o CSS. Idealmente, vorrei ottenere questo effetto mantenendo uguale la firma della funzione di genericPop (...).

Answer 1

Ecco la mia soluzione utilizzando le librerie dell'interfaccia utente jQuery e jQuery. L'API non è stata modificata , ma il parametro 'nome' è ignorato . Uso iframe per caricare il contenuto da strLink e quindi visualizzo iframe da bambino per generare div , che viene quindi convertito in pop-up modale utilizzando 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;
  });
});

Documentazione per l'interfaccia utente / dialogo di jQuery .

Answer 2

Uso questo codice di dialogo per fare abbastanza più o meno la stessa cosa.

Se ricordo correttamente l'implementazione predefinita non supporta il ridimensionamento della finestra di dialogo. Se non riesci a creare con una sola dimensione, puoi modificare il codice o CSS per visualizzare più larghezze.

l'utilizzo è semplice:

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

Modifica di js per supportare più larghezze:

Aggiungi larghezza e altezza come attributi per mostrare la funzione della finestra di dialogo e impostale sugli elementi della finestra di dialogo e del contenuto della finestra di dialogo sulla riga 68

Answer 3

Prova Control.Window , che richiede Prototype

Ecco come lo uso:

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

E nel mio file 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' });
  });
});

Ora se vuoi chiudere il popup attualmente aperto, fai:

Control.Modal.current.close()