WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » PopUp without opening new window

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted PopUp without opening new window on Wed Jun 16, 2010 9:05 pm

Unknown Data


Registered Member
Registered Member
PopUp without opening new window
PopUP box withot opening a new window


Here I will learn you, how to make a PopUp without opening a new window.
It's quiet simple, just follow the steps.

1. Step - Open PopUp
For the first, you'll have to make a link to open the PopUp, but it's now a normal link. Some small attributes are added.
<a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('The PopUp have to got a ID, it could be fx "1"').style.display = 'block' " >Name of the PopUp link</a>

2. Step - Design
At this step we now have to make the PopUp, it look like this.
<div id='The same ID you used in Open PopUp-step' style='display: none; position: absolute;>Here you put normal tags, text, effects in - like you would design a normal page (body)</div>

We aren't done yet, there are som small attributes you have to put in the 'div' tag. I've just posted the code without the attributes source, then you you to redirect the red stroke. You don't have to use all the attributes!
<div id='' style='display: none; position: absolute; left: -px; top: -px; border: -px; padding: -px; background-color: -; text-align: -; font-size: -px; width: -px;' ></div>

All right now we just need to know what all this means. More can be added, it's up to you.
AttributeExampleWhat do we get?
left:280How many pixelse from the left, the PopUp would be placed
top:150How many pixelse from the top, the PopUp would be placed
border:solid black 1Like in a table, frame color and size
padding:10The padding for the PopUp
background-color:whiteThe background color
text-align:justifyWhich text type
font-size:10The size of the text
width:1000The width of the PopUp

We also have to close the PopUp, so place this code inside the PopUp body.
<a onmouseover='this.style.cursor="pointer" onfocus='this.blur();' onclick="document.getElementById('The ID you used at the Open PopUp-step').style.display = 'none' " >Close</a></div>

So we got it all, now you should cud make a PopUp without opening a new window.


Click here to se the demo

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.



Last edited by Unknown Data on Fri Jun 25, 2010 2:25 pm; edited 2 times in total

http://www.sjovfakta.dk

2Accespted Re: PopUp without opening new window on Thu Jun 17, 2010 5:20 am

Russel


WebArtz Moderator
WebArtz Moderator
Nice tutorial Unknown Data but it is better if you will provide demo Smile


_________________





No Support Via PM
http://facebook.com/russelpuge

3Accespted Re: PopUp without opening new window on Thu Jun 17, 2010 5:47 pm

Unknown Data


Registered Member
Registered Member
Thank you!
So I've added a demo. (:

http://www.sjovfakta.dk

4Accespted Re: PopUp without opening new window on Thu Jun 17, 2010 5:52 pm

Russel


WebArtz Moderator
WebArtz Moderator
Nice one bro. Keep up the good work


_________________





No Support Via PM
http://facebook.com/russelpuge

5Accespted Re: PopUp without opening new window on Fri Jun 18, 2010 1:11 pm

iJerick


Registered Member
Registered Member
I think it's a toggle! Smile

Anyway, Nice tutorial!: )

6Accespted Re: PopUp without opening new window on Fri Jun 18, 2010 1:47 pm

ankillien


Administrator
Administrator
Nice tutorial and very well explained Very Happy

Tutorial Accepted

7Accespted Re: PopUp without opening new window on Fri Jun 18, 2010 9:48 pm

Fred100


Registered Member
Registered Member
Wow , that tutorial was sure pretty good and really awesome Wink
Well , if I ain't wrong then once I had to do a urgent shut down of my PC , and I had a pop up on , and when I opened my firefox , it showed me the "Restore tabs" option , and there I noticed this pop up thingy which was sort of like =popup? , or ;popup=? , i'm not sure , it was weeks ago , lol
and awesome work with the tutorial Wink

http://www.art-castle.biz/forum.htm

8Accespted Re: PopUp without opening new window on Fri Jun 18, 2010 10:12 pm

Joel


Registered Member
Registered Member
wow! I'm impressed!

http://www.advertisehotspot.info/

9Accespted Re: PopUp without opening new window on Tue Jun 22, 2010 1:06 pm

Russel


WebArtz Moderator
WebArtz Moderator
Alright. Great Tutorial dude. XD


_________________





No Support Via PM
http://facebook.com/russelpuge

10Accespted Re: PopUp without opening new window on Fri Jun 25, 2010 2:09 am

Krazy


Registered Member
Registered Member
Nice tutorial, I just suggest getting better grammar.

11Accespted Re: PopUp without opening new window on Thu Aug 26, 2010 5:42 pm

Pinks


Registered Member
Registered Member
nice thank you Smile

12Accespted Re: PopUp without opening new window on Fri Aug 27, 2010 10:50 am

Joel


Registered Member
Registered Member
Yep, a great tutorial as i said earlier on. This will come in handy for my forum some time soon Very Happy

http://www.advertisehotspot.info/

13Accespted Re: PopUp without opening new window on Fri Nov 05, 2010 12:38 am

makigo


Registered Member
Registered Member
Nice tutorial.Can we use this window over iframe?

14Accespted Re: PopUp without opening new window on Fri Nov 05, 2010 12:41 am

makigo


Registered Member
Registered Member
Is it possible to use your popup window over iframe?

15Accespted Re: PopUp without opening new window on Fri Nov 05, 2010 12:41 am

Unknown Data


Registered Member
Registered Member
Yes. Wink

http://www.sjovfakta.dk

16Accespted Re: PopUp without opening new window on Mon Nov 08, 2010 11:30 pm

sean


Registered Member
Registered Member
not bad good tutorial Popcorn

http://www.witalent.net

17Accespted Re: PopUp without opening new window on Wed Mar 09, 2011 5:00 pm

razvy3


Registered Member
Registered Member
Where is the demo ?

18Accespted Re: PopUp without opening new window on Thu Apr 21, 2011 7:13 pm

jckjones29


Registered Member
Registered Member
Hi,
I have one code you can put this code in your button .
<mx:Button
click="openNewWindow(event, 'http://www.google.com/', 'candiespop', 400, 200, 1, 1, 1, 1, 1, 1, 1);"
id="test link"
useHandCursor="true"
buttonMode="true"
mouseChildren="false" />

View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » PopUp without opening new window

Permissions in this forum:
You cannot reply to topics in this forum