Replacement for popups

noxi · 2005-11-18 00:35:18

I made this little module for a customer. Thought it might help as a replacement for those ugly popups

Its been tested in IE and FF.

Wolfgang · 2005-12-02 06:59:25

Hello,

nice Popup!
However i was unable to use the layout parameter. Example:

mylayout = 
    {
    modalClass        : 'modal',
    popupClass        : 'popup',
    titlebarClass    : 'titlebar',
    closebtnClass    : 'closebtn'
    }//Layout


<center><a href="javascript:void(popin(200, 200, 'popup.html', 'mylayout' ));">show popup...</a></center>

This did not work as expected, so i certainly did something wrong.
Also i tried to assign a title to the popup without success.

Could you give an example of how to add a title, a customlayout and maybe also how to return a value. For example any javascript variable set in popup.html.

Thank you in advance ;-)

Last edited by Wolfgang (2005-12-02 07:10:50)

noxi · 2005-12-02 10:16:57

Hi,
Noone replied so kinda thought noone liked it ... Glad u like it

U set title on the document u open ie. popup.html

expample :

function init()
{
    if (this.parent.vpopin)
        this.parent.vpopin.setTitle('Custom popup...');
}//function init

window.onload = init;

// Expample how to call close from within the popin
function closepopup()
{
    if (this.parent.vpopin)
        this.parent.vpopin.close('my return value');
}//function closepopup

To set a custom layout can be done :

mylayout =
{
    modalClass    : ''    ,     //<-- the classname for the area behind the popin
    popupClass    : ''    ,    //<-- the classname for popin itself
    titlebarClass    : ''    ,    //<-- the classname the title bar
    closebtnClass    : ''    ,    //<-- the classname for the close button
    contentClass    : ''    //<-- the classname for the content area of the popin
}

 or, do this to overwrite default layout. That way u can just write : popin(200, 200, 'popup.html');
vPopin.defaultLayout =
{
    modalClass    : ''    ,     //<-- the classname for the area behind the popin
    popupClass    : ''    ,    //<-- the classname for popin itself
    titlebarClass    : ''    ,    //<-- the classname the title bar
    closebtnClass    : ''    ,    //<-- the classname for the close button
    contentClass    : ''    //<-- the classname for the content area of the popin
}

Return code is easy:

function alertreturn(val)
{
    alert(val);
}

window.vpopin.onclose = alertreturn;

I hope this clarifies it a bit ... If not let me know and try and explain it better

Last edited by noxi (2005-12-02 10:21:11)

noxi · 2005-12-02 10:18:32

her is the css i used for the layout

.modal
{
    background-image:         url(transparent.gif);
    background-repeat:         repeat;
}

.popup
{
    border :                 1px solid black;
    background-color:        white;
}
.titlebar
{
    background-color:         #222299;
    padding:                 1px 0px 0px 5px;
    color:                     white;
    height:                 17px;
    font:                      bold 12px arial;
    vertical-align:         bottom;
    overflow:                 hidden;
}

.closebtn
{
    height:                    18px;
    width:                     18px;
    background-color:        #222299;
    cursor:                    pointer;
    overflow:                 hidden;
    background-image:         url(closebtn.gif);
    background-repeat:         no-repeat;
    background-position:    center center;
}

Wolfgang · 2005-12-02 17:29:00

Thank you very much for the helpful explanation. I got most of it working. However i have not managed to get the return code, yet. Here what i tried (vpopup.html is the main windows that calls popup.html)

vpopup.html

//...
function alertreturn(val)
{
    alert(val);
}

window.vpopin.onclose = alertreturn;    
//...

popup.html

//...
// Expample how to call close from within the popin
function closepopup()
{
    if (this.parent.vpopin)
        this.parent.vpopin.close('my return value');
}//function closepopup
//...

Also i tried assigning a function within vpopup.js in function vPopin (although i would not like to do it this way) As i put into the comment that did not work for me:

function vPopin(layout)
{

//...

    //Events

    //did not work. calls only once on load after link for popup is clicked, before popup is shown.
    //this.onclose    = alert('hallo');    // called when the popup is closed.

    this.onclose    = null;    // called when the popup is closed.
    
//...
}

Basically what i would like to achive:
-pass one value as a return value from the popup to the calling document when the popup is closed.
-pass multiple values (as an object like: myobj.name; my.value; my.size etc.) as a return value.

So something like:

<center><a href="javascript:void( var myval = popin(400, 600, 'edit.php', mylayout)  );">show popup...</a></center>

<center><a href="javascript:void( var myobj = popin(400, 600, 'edit.php', mylayout)  );">show popup...</a></center>

and

<button onclick="var myval = popin(400, 600, 'edit.php', mylayout);">Edit me...</button>

Any ideas?

noxi · 2005-12-03 08:01:19

Hmm seems there was a litle inconsistancy in the vPopin.js code... Ive update it and made the example to show how to get the return value..

Example of vPopin - download

Wolfgang · 2005-12-05 08:15:44

Thank you. Will give it a try ;-)

Ecco · 2005-12-07 05:56:27

Wow ! I love it !

Xinha Discussion Forum

Announcement

#1 2005-11-18 00:35:18

Replacement for popups

#2 2005-12-02 06:59:25

Re: Replacement for popups

#3 2005-12-02 10:16:57

Re: Replacement for popups

#4 2005-12-02 10:18:32

Re: Replacement for popups

#5 2005-12-02 17:29:00

Re: Replacement for popups

#6 2005-12-03 08:01:19

Re: Replacement for popups

#7 2005-12-05 08:15:44

Re: Replacement for popups

#8 2005-12-07 05:56:27

Re: Replacement for popups

Board footer