close button

Hi

I know you can just click away from the window to close it but is there any way I can add a "close X" on the edge of the window somewhere?

My target audience are not very computer literate and this would help them.

Thanks

Sked
asked Apr 3, 2011 by anonymous

5 Answers

0 votes
[quote name='greg_dd' date='30 June 2010 - 08:56 PM' timestamp='1277931404' post='815']

For anyone wanting to add a close button here is the code.

In the tinybox.js file starting on line 9 replace that if statement with this one:

 if(!f){

p=document.createElement('div'); p.id='tinybox';

m=document.createElement('div'); m.id='tinymask';

b=document.createElement('div'); b.id='tinycontent';

closer=document.createElement('div'); closer.id='closex';

document.body.appendChild(m); document.body.appendChild(p); p.appendChild(B); p.appendChild(closer);

m.onclick=TINY.box.hide; window.onresize=TINY.box.resize; f=1;

closer.onclick=TINY.box.hide;

}



Just added to my copy of the code but it threw an error and wanted the upper case B changed to lowercase on line 6 of your code.

Thanks.
answered Apr 3, 2011 by anonymous
0 votes
This is a question for Michael.  In the code that I have just posted, I would like to position the x.png button just outside the extents of the box (sort of half on and half off the box.)  This works fine in Chrome, Safari and FF but not IE.  Is there any way to make this work in IE?

I have created an example of this at http://nelsonwhitewaterrafting.com/tinybox/ (Just click on "Advanced").  You can see this button is cut off in IE browsers.

I know this seems so minor but it just looks so much better when it is positioned half outside the extents of the box.

Thank you for all your great work.

Greg
answered Apr 3, 2011 by anonymous
0 votes
For anyone wanting to add a close button here is the code.

In the tinybox.js file starting on line 9 replace that if statement with this one:

 if(!f){

p=document.createElement('div'); p.id='tinybox';

m=document.createElement('div'); m.id='tinymask';

b=document.createElement('div'); b.id='tinycontent';

closer=document.createElement('div'); closer.id='closex';

document.body.appendChild(m); document.body.appendChild(p); p.appendChild(B); p.appendChild(closer);

m.onclick=TINY.box.hide; window.onresize=TINY.box.resize; f=1;

closer.onclick=TINY.box.hide;

}



Then in your style.css file add this line:


#closex {position:absolute; top:-10px; right:-10px; z-index:5000; background-image:url(images/x.png); background-repeat:no-repeat; width:24px; height:24px; padding:0px; margin:0px;cursor: hand; cursor: pointer;}



Then just make your x.png file (use a transparent background) and put it in the images folder. I have attached my x.png file if you want to use mine. You are done!

I have tested this on FF, Safari, IE 7 & 8 and Chrome.  It should work fine on all browsers that tinybox works on.

Greg
answered Apr 3, 2011 by anonymous
Close button is invisible.
0 votes
Of course! Thanks dude
answered Apr 3, 2011 by anonymous
0 votes
You can create another DOM element like a div or an image in the show function and position it wherever you like with CSS. Then set the onclick method for the div/button/etc to TINY.box.hide(). Hope that makes sense, pretty simple.
answered Apr 3, 2011 by anonymous
Web Analytics