Szerettem volna egy nagyon egyszerű, dialógus ablakot, ami könnyen átlátható.
A legfontosabb kitétel az volt, hogy egy divet hozzon létre, amibe majd bármit bele tudok illeszteni.
Találtam is egyet
Sajnos az én stilusomnak nem felelt meg. Ezért módosítanom kellett.
A módosítás 2 fontosnak vélt ok miatt vált szükségszerűvé.

  • Egyrészt szeretek névtereket létrehozni
  • Másrészt a létrehozásnál minden alkalommal újra és újra létrehoztuk a dialógus ablakot és a layert is, így a nyitások számával nőtt az elemek száma is. 🙁

[code lang=”javascript”]
var PrototypeWindow = {
Dialog : function (content, container)
{
// Manage arguments and assign defaults,
if (typeof container == ‘undefined’ ) container = document.body;
if (null == (this.container = $(container))) throw("container is not valid");

// Assign instance variables
this.content = content;
if ($(‘dialogBoxOverlay’) == null)
{
this.overlay = new Element(‘div’, {‘id’:’dialogBoxOverlay’, ‘class’: ‘overlay’ }).hide();
}
else
{
this.overlay = $(‘dialogBoxOverlay’).hide();
}
if ($(‘dialogBox’) == null)
{
this.dialog  = new Element(‘div’, {‘id’:’dialogBox’, ‘class’: ‘dialog’ }).hide();
}
else
{
this.dialog = $(‘dialogBox’).hide();
}

// Hide the overlay when clicked. Ignore clicks on the dialog.
Event.observe(this.overlay, ‘click’, this.hide.bindAsEventListener(this));
Event.observe(this.dialog, ‘click’,  function(event) { Event.stop(event) });

// Insert the elements into the DOM
this.dialog.insert(this.content);
this.container.insert(this.overlay);
this.container.insert(this.dialog);

// Content may have been hidden if it is embedded in the page
content.show();
this.dialog.hide();

}
}

PrototypeWindow.Dialog.prototype.show = function() {
new Effect.Appear(this.overlay, { duration: 0.5,  to: 0.8 });
this.dialog.show();
return this;
};
PrototypeWindow.Dialog.prototype.hide = function(event) {
this.dialog.hide();
this.overlay.hide();
this.dialog.innerHTML=”;
return this;
};
[/code]

A dialógus ablak használata egyszerű

[code lang=”javascript”]
<script type="text/javascript">
var dialog = new Element(‘div’); // létrehozzunk egy divet
dialog.insert(new Element(‘h2’).insert(‘Dialogue’)); // felötljük adatokkal, ez a sor opcionális…
var overlay = new DialogOverlay(dialog); // divünket beletesszük a dialógus ablakba
overlay.show(); // megjelenítjük a dialógus ablakot
</script>
[/code]

Szükségünk lehet még némi css-re a működéshez:

[code lang=”css”]
.overlay {
width: 100%;
height: 100%;
background: black;
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
.dialog {
width: 50%;
min-height: 50%;
background: white;
position: fixed;
top: 25%;
left: 25%;
z-index: 3;
}
[/code]