Popup-window

Ajax Layer JavaScript DHTML


            



YAHOO.widget.Panel











  YAHOO.namespace("example.panel");
  YAHOO.example.panel.panels = [];
  function init() {
    YAHOO.example.panel.panel = new YAHOO.widget.Panel("win", { width:"30em", fixedcenter: true, constraintoviewport: true, underlay:"shadow", close:true, visible:false, draggable:true, modal:false } );
    YAHOO.example.panel.panel.render();
    
    YAHOO.example.panel.panels["win"] = YAHOO.example.panel.panel;
  }
  function create() {
    var form = document.forms["overlayform"];
    // get form values
    var id = form["id"].value;
    var x = form["x"].value;
    var y = form["y"].value;
    
    var header = form["header"].value;
    var body = form["body"].value;
    var footer = form["footer"].value;
    var visible = form["visible"].checked;
    var effectArg;
    if (form["effect"].selectedIndex > 0) {
      var dur = form["duration"].value;
      if (! dur) {
        dur = 0.5;
      } else {
        dur = parseFloat(dur);
      }
      var effect = form["effect"].options[form["effect"].selectedIndex].value;
      var effectClass = eval(effect);
      effectArg = {
        effect:effectClass,
        duration:dur
      }
    }
    var width = form["width"].value;
    var height = form["height"].value;
    var zIndex = form["zIndex"].value;
    var constrain = form["constraintoviewport"].checked;
    var useIframe = form["iframe"].checked;
    
    var fixedcenter = form["fixedcenter"].checked;
      
    var modal = form["modal"].checked;
    var close = form["close"].checked;
    var draggable = form["draggable"].checked;
    var context = form["context"].value;
    var contextArg = new Array();
    if (context) {
      contextArg[0] = context;
      contextArg[1] = form["elementMagnet"].options[form["elementMagnet"].selectedIndex].value;
      contextArg[2] = form["contextMagnet"].options[form["contextMagnet"].selectedIndex].value;
    }
    
    var underlay = "none";
    if (form["underlay"].selectedIndex > 0) {
      underlay = form["underlay"].options[form["underlay"].selectedIndex].value;
    }
    var args = {};
    args.visible = visible;
    if (effectArg) {
      args.effect = effectArg;
    }
    if (x) {
      args.x = parseInt(x);
    }
    if (y) {
      args.y = parseInt(y);
    }
    if (width) {
      args.width = width;
    }
    if (height) {
      args.height = height;
    }
    
    args.constraintoviewport = constrain;
    args.iframe = useIframe;
  
    args.fixedcenter = fixedcenter;
    args.draggable = draggable;
    args.modal = modal;
    args.underlay = underlay;
    args.close = close;
    if (contextArg.length > 0) {
      args.context = contextArg;
    }
    var newMod;
    var isNew = true;
    if (YAHOO.example.panel.panels[id]) {
      newMod = YAHOO.example.panel.panels[id];
      newMod.cfg.applyConfig(args);
      isNew = false;
    } else {
      newMod = new YAHOO.widget.Panel(id, args);
      YAHOO.example.panel.panels[id] = newMod;
    }
    if (header) {
      newMod.setHeader(header);
    }
    if (body) {
      newMod.setBody(body);
    }
    if (footer) {
      newMod.setFooter(footer);
    }
    
    if (isNew) {
      newMod.render(document.body);
    } else {
      newMod.render();
    }
  }
  YAHOO.util.Event.addListener(window, "load", init);



  
    
      Panel Example


    
      A Panel is a configurable Overlay which behaves like a traditional OS window, and includes built-in drag & drop, a close icon, an underlay (shadow or matte) and built-in modality. To instantiate a Panel against existing markup, the constructor is very similar to the one used for Overlay. The example here is instantiated using this constructor:
        win = new YAHOO.widget.Panel("win", { width:"400px", fixedcenter: true, constraintoviewport: true, underlay:"shadow", close:true, visible:false, draggable:true} );
      

      Panel, like its base classes, features dynamic configuration. Try executing the code below to change the underlay style to matte:
        panel.cfg.setProperty("underlay","matte");try it!
      

      Show the Panel