Open Dialog in JavaScript

Funzione JavaScript per aprire una finestra dialog modal passando la url di una pagina da visualizzare. Non usa librerie esterne solo JavaScript e HTML 5.

libreria JavaScript per aprire la dialog tramite sgart.openDialog({...}):
File: sgart-dialog.js

JavaScriptCopia

/* 
 * File: sgart-dialog.js
 * https://www.sgart.it/IT/informatica/open-dialog-in-javascript/post
 * gestione finestre modali per il caricamento di una pagina
 */
"use strict";
window.sgart = window.sgart || {};

/// options= {url:'', title:'', width: 300, height: 400
/// , className: null, closeOnBackground: flase, onClosed: null}
sgart.openDialog = function (options) {
  var dw = window.innerWidth;
  var dh = window.innerHeight;
  // gestione parametri di ingresso
  var url = options.url;
  var title = options.title;
  var className = options.className || '';
  var showTitle = options.showTitle == null ? true : options.showTitle;
  var closeOnBackground = options.closeOnBackground == null ? false : options.closeOnBackground;
  var showClose = options.showClose == null ? true : options.showClose;
  var w = options.width || 700;
  var h = options.height || 450;
  // dimensioni minime
  if (w < 50) w = 50;
  if (h < 50) h = 50;
  // gestione "centraggio" finestra di dialogo
  var l = (dw - w) / 2;
  var t = (dh - h) / 2;
  if (l < 0) l = 0;
  if (t < 0) t = 0;
  // evento di chiusura
  var onClosed = null;
  if (typeof options.onClosed === 'function')
    onClosed = options.onClosed;
  // apertura dialogo
  var id = "sgart-dialog-modal";
  var idContainer = id + "-container";
  var idTitle = id + "-title";
  var idClose = id + "-close";

  var objModal = document.getElementById(id);
  var objModalContainer = document.getElementById(idContainer);
  if (objModalContainer === null) {
    // aggiungo gli stili/css
    var css = '.sgart-dialog-modal {position:absolute;display:none;top:0;left:0;right:0;bottom:0;background-color:rgba(25,25,25,.5);z-index:2500;}'
      + '.sgart-dialog-modal .sm-title {position:absolute;display:block;top:10px;left:10px;width:50%;height:30px;font-size:22px;background-color:#fff;color:#000;text-align:left;z-index:2502;overflow:hidden;}'
      + '.sgart-dialog-modal .sm-close {position:absolute;display:block;top:10px;right:10px;width:30px;height:30px;font-size:22px;background-color:#fff;color:#000;text-align:center;z-index:2502;cursor:pointer;}'
      + '.sgart-dialog-modal .sm-iframe {position:relative;margin:0;z-index:2501"}';
    var head = document.head || document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
    head.appendChild(style);

    //creo il contenitore principale (sfondo) e lo aggiungo alla fine del body
    var div = document.createElement('div');
    div.id = id;
    div.className = 'sgart-dialog-modal ' + className;
    div.innerHTML = '<div id="' + idClose + '" class="sm-close">X</div>'
      + '<div id="' + idTitle + '" class="sm-title"></div>'
      + '<div id="' + idContainer + '" class="sm-container"></div>';
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(div);
    // visto che è stato appena inserito momorizzo i riferimenti
    objModal = div;
    objModalContainer = document.getElementById(idContainer);
    //gestione evento di clhiusura
    var handleClosed = function (ev) {
      ev.stopPropagation();
      if ((ev.target.id === idClose && showClose) || closeOnBackground) {
        objModal.style.display = 'none';
        objModalContainer.innerHTML = '';
        if (onClosed != null)
          onClosed();
      }
    };
    document.getElementById(idClose).addEventListener('click', handleClosed, true);
    objModal.addEventListener('click', handleClosed, false);
  }
  if (showTitle === false)
    document.getElementById(idTitle).style.display = 'none'
  else
    document.getElementById(idTitle).innerHTML = title;
  if (showClose === false)
    document.getElementById(idClose).style.display = 'none'

  //inserisco un iframe che punta alla url passata
  objModalContainer.innerHTML = '<iframe src="' + url + '" class="sm-iframe" style="top:' + t + 'px; left:' + l + 'px;width:' + w + 'px;height:' + h + 'px;"></iframe>';
  objModal.style.display = 'block';

  return false;
}

va richiamato con:

JavaScriptCopia

<h1>Esempio dialog in puro javascript</h1>

  <p><button type="button" onclick="doOpen()">Open dialog</button></p>

  <script type="text/javascript">
    function doOpen() {
      sgart.openDialog({
        url: 'https://www.sgart.it',
        title: 'Sgart.it test Modal',
        width: 500,
        height: 400,
        className: 'custom-class',
        showTitle: true,
        closeOnBackground: true,
        showClose: true,
        onClosed: function () {
          console.log('evento onClosed');
        }
      });
    }
  </script>

la funzione sgart.openDialog accetta un oggetto che può avere le seguenti proprietà:

• url: link alla pagina da aprire nella finestra
• title: titolo della finestra (opzionale)
• width: larghezza della finestra (opzionale)
• height: altezza della finestra (opzionale)
• className: eventuale classe per personalizzare lo stile (opzionale)
• showTitle: flag per visualizzare o meno il titolo (opzionale)
• closeOnBackground: flag per abilitare la chiusura della finestra cliccando sullo sfondo (opzionale)
• showClose: flag per visualizzare o meno il bottone di chiusura (opzionale)
• onClosed: funzione richiamata dopo che la finestra è stata chiusa (opzionale)

Esempio: