VIEW DEMO!

Pop-Up Menu is quite different and like any tool has its positives and negatives.

• Positive: Makes the page more dynamic, and need not redirects.
• Negative: The INFINITE SCROLL doesn’t work fine when you use it.

Advice!

Before doing anything, it’s good if you save your code as a precaution. 

Let’s begin with the javascript code! Put it before </head> tag.

CODE

In the code, look for:

<img src="http://tiny.cc/closeimg" class="btn_close" title="Close 
Window" alt="Close" /></a>

This is the code for the close image (the “X” that will be in the top right corner). You can replace the URL for your own image if you want.

Now you will put in your CSS the codes to customize your pop-up window.

#fade {
	display: none;
	background: #000;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: .80;
	z-index: 9999;
}

.popup_block{
	display: none;
	background: #FFFFFF;
	padding: 20px;
	float: left;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 99999;
}

img.btn_close {
	float: right;
	margin: -55px -55px 0 0;
}

*html #fade {
	position: absolute;
}

*html .popup_block {
	position: absolute;
}

That is the simple code, you can add more features and change the colors (the popup_block is the code for the pop-up window).

Now this step requires attention! You will put this code where it’ll be the link to your pop up (HTML):

<a href="#?w=500" rel="popup_name" class="poplight">
Pop-Up Menu NAME
</a>

Just need to change “Pop-Up Menu NAME”. Understanding better the code:

• <a href=”#?w=500“> - Defines the width of the pop up window. 
• rel=”popup_name” - is where you’ll put the name of the page that has the content of the pop up window.

Now we’ll create the content! *You can put this in any part of HTML

<div id="popup_name" class="popup_block">
PAGE CONTENT HERE!
</div>

Note that is same name in rel=”popup_name” and div id=”popup_name”!

That’s all!

I think that Pop-up menu it’s a nice way to create a “ask me” page. Like I use in SAKANA theme. To make it, you just need to put this code where will be the content:

<iframe frameborder="0" 
height="150" 
id="ask_form" 
scrolling="no" 
src="http://www.tumblr.com/ask_form/YOUR-TUMBLR-URL" 
width="100%">  
</iframe>

And change for your TUMBLR URL WITHOUT THE “HTTP://” (like: starious.tumblr.com).

SOURCE: Karine Fernandes

1. lashlights reblogged this from starious
2. shankuzu likes this
3. soulmatesdrawntoeachother likes this
4. ofastarlight likes this
5. ontokii likes this
6. mochicky likes this
7. akekiku-themes reblogged this from redfox-themes
8. cantdeniall likes this
9. forever-faye likes this
10. linneyca likes this
11. irishbums likes this
12. sunber likes this
13. joshdallas likes this
14. bestprankever likes this
15. briel-roleplayer likes this
16. kiritoast likes this
17. darkgrays likes this
18. spiceinthecoffee likes this
19. beneficii reblogged this from alphathemes
20. bqekhyun likes this
21. zeeacontheblock likes this
22. autumn-stbitch likes this
23. chalolite reblogged this from themesrec
24. shoebox94themes reblogged this from starious
25. louise-brooks likes this
26. shanhammer reblogged this from starious
27. shanhammer likes this
28. aegyochan likes this
29. yongguq reblogged this from lmthemes
30. torchno likes this
31. aly-brielle likes this
32. rimmingniall likes this
33. atsuyeah reblogged this from regispectre
34. roguealert likes this
35. garethhalloway likes this
36. yoda-oneforme likes this
37. sassy-serkets likes this
38. femfinland reblogged this from starious
39. serdavenlannister likes this
40. melisandrelikesreferences reblogged this from starious
41. mermaidmelisandre likes this
42. deci-frar likes this
43. chinats-u likes this
44. gayseumi likes this
45. heartcapsule reblogged this from starious
46. heartcapsule likes this
47. sinisterdemon likes this
48. guruum reblogged this from starious
49. thescientist-and-thepoet likes this
50. Show more notesLoading...