Jump to content


Photo

tumblr ask me anything box (need assistance)


  • Please log in to reply
21 replies to this topic

#1 spudly1987

spudly1987

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 23 September 2013 - 10:07 AM

Not sure if this is in the right section but was wondering if anyone can help me

 

I have the following code that is for my tumblr site 

tattoofreak87.tumblr.com

 

what i am aiming for is that when you click on the "ask me anything" link it will pop up the "ask me anything" box in the top center of the screen however not sure what i am doing wrong. as it stands right now the box is always there i there in the center and i would like it not to be. 

 

any help will be greatly appreciated

<html>

    <title>Vince's Tumblr</title>
    
    <head>
    <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
// 
$('a.poplight[href^=#]').click(function() { 
var popID = $(this).attr('rel'); //Get Popup Name 
var popURL = $(this).attr('href'); //Get Popup href to define size 
var query= popURL.split('?'); 
var dim= query[1].split('&'); 
var popWidth = dim[0].split('=')[1]; //Gets the first query string value 
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://png.findicons.com/files/icons/1714/dropline_neu/24/dialog_close.png" class="btn_close" title="Close" alt="Close" /></a>'); 
var popMargTop = ($('#' + popID).height() + 80) / 2; 
var popMargLeft = ($('#' + popID).width() + 80) / 2; 
//Apply Margin to Popup 
$('#' + popID).css({ 
'margin-top' : -popMargTop,
'margin-left' : -popMargleft 
}); 
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) 
return false; 
}); 
$('a.close, #fade').live('click', function() { 
$('#fade , .popup_block').fadeOut(function() { 
$('#fade, a.close').remove(); //fade them both out 
}); 
return false; 
}); 
}); 
    .popup_block{
display: none;
background: #D3D3D3;
background-image: url();
padding: 10px;
font-family: Garamond;
float: left;
font-size: 10px;
position: fixed;
top: 50%; left: 50%;
z-index: 2;
border: 2px solid #363636;
-moz-box-shadow: 0 0 5px #CFCFCF;
-webkit-box-shadow: 0 0 5px #CFCFCF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -5px -5px 0 0;
}
*html .popup_block {
position: absolute;
}
</script>

    </head>

    <body>
    
    <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/419067_238953752859147_1698306198_n.jpg" width="200" height="300">
    
    <div style="text/javascript">
    <li><a href="https://twitter.com/tattoofreak1987" Target="_blank">Twitter</a>
    <li><a href="https://www.facebook.com/tattoofreak1987">Facebook</a>
    <li><a href="#?w=500" rel="02" class="poplight">Ask Me Anything</a>
    </div>


    </body>
    
    <div id="02" class="popup_block">

<Center><font size="5" color="#1C1C1C"><p></font><iframe frameborder="0" scrolling="yes" width="50%" height="140" src="http://www.tumblr.com/ask_form/tattoofreak87.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
</center></div>

</div></div></div></div></div></div></div></div></div></div>

</html>


#2 KubeR

KubeR

    Advanced Member

  • Members
  • PipPipPip
  • 57 posts
  • Age:17

Posted 23 September 2013 - 10:28 AM

First of all,you tumblr has many errors,which I suggest you to fix.
Second,try to put the CSS code where the container is located at,out of the NoScript tags.

Edited by KubeR, 23 September 2013 - 10:32 AM.


#3 spudly1987

spudly1987

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 23 September 2013 - 11:53 AM

I mad the chance and moved my CSS out of the script tags, still i am unable to make the ask box where i want it to be



#4 KubeR

KubeR

    Advanced Member

  • Members
  • PipPipPip
  • 57 posts
  • Age:17

Posted 23 September 2013 - 01:02 PM

Sorry for the confusion,probably I misunderstood.

Put the CSS code between <style></style> tags and make sure they're between the head tags and aren't in <script> tags.

Also,you put the end of the body too early,put it before </html> so the "popup_block" will apear when you click.


Edited by KubeR, 23 September 2013 - 01:05 PM.


#5 spudly1987

spudly1987

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 23 September 2013 - 08:10 PM

Okay I have updated my code to what I believe you are referencing to 

<html>

    <title>Vince's Tumblr</title>
    
    <head>
    
    <style type="text/css">
    
    }); 
    .popup_block{
display: none;
background: #D3D3D3;
background-image: url();
padding: 10px;
font-family: Garamond;
float: left;
font-size: 10px;
position: fixed;
top: 50%; left: 50%;
z-index: 2;
border: 2px solid #363636;
-moz-box-shadow: 0 0 5px #CFCFCF;
-webkit-box-shadow: 0 0 5px #CFCFCF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -5px -5px 0 0;
}
*html .popup_block {
position: absolute;
    }
    
    </style>

    </head>
    
    <body>
    
    <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
// 
$('a.poplight[href^=#]').click(function() { 
var popID = $(this).attr('rel'); //Get Popup Name 
var popURL = $(this).attr('href'); //Get Popup href to define size 
var query= popURL.split('?'); 
var dim= query[1].split('&'); 
var popWidth = dim[0].split('=')[1]; //Gets the first query string value 
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://png.findicons.com/files/icons/1714/dropline_neu/24/dialog_close.png" class="btn_close" title="Close" alt="Close" /></a>'); 
var popMargTop = ($('#' + popID).height() + 80) / 2; 
var popMargLeft = ($('#' + popID).width() + 80) / 2; 
//Apply Margin to Popup 
$('#' + popID).css({ 
'margin-top' : -popMargTop,
'margin-left' : -popMargleft 
}); 
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) 
return false; 
}); 
$('a.close, #fade').live('click', function() { 
$('#fade , .popup_block').fadeOut(function() { 
$('#fade, a.close').remove(); //fade them both out 
}); 
return false; 
}); 
</script>

    
    <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/419067_238953752859147_1698306198_n.jpg" width="200" height="300">
    
    <div style="text/javascript">
    <li><a href="https://twitter.com/tattoofreak1987" Target="_blank">Twitter</a>
    <li><a href="https://www.facebook.com/tattoofreak1987">Facebook</a>
    <li><a href="#?w=500" rel="02" class="poplight">Ask Me Anything</a>
    </div>

    
    <div id="02" class="popup_block">
<Center><font size="5" color="#1C1C1C"><p></font><iframe frameborder="0" scrolling="yes" width="50%" height="140" src="http://www.tumblr.com/ask_form/tattoofreak87.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
</center></div>

</div></div></div></div></div></div></div></div></div></div>
    
        
    </body>
</html>


#6 spudly1987

spudly1987

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 23 September 2013 - 09:00 PM

Okay Played around with it again, and now the ask box is gone and no longer in the center of the screen, however now when I click on "Ask Me Anything" nothing is popping up.

<html>

    <title>Vince's Tumblr</title>
    
    <head>
    
    <style type="text/css">
    .popup_block{
display: none;
background: #D3D3D3;
background-image: url();
padding: 10px;
font-family: Garamond;
float: left;
font-size: 10px;
position: fixed;
top: 50%; left: 50%;
z-index: 2;
border: 2px solid #363636;
-moz-box-shadow: 0 0 5px #CFCFCF;
-webkit-box-shadow: 0 0 5px #CFCFCF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -5px -5px 0 0;
}
*html .popup_block {
position: absolute;
    }
    
    </style>

    </head>
    
    <body>
    
    <body background="http://www.wallpaper4me.com/images/wallpapers/gothicroses-7024.jpeg">
    
    <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
// 
$('a.poplight[href^=#]').click(function() { 
var popID = $(this).attr('rel'); //Get Popup Name 
var popURL = $(this).attr('href'); //Get Popup href to define size 
var query= popURL.split('?'); 
var dim= query[1].split('&'); 
var popWidth = dim[0].split('=')[1]; //Gets the first query string value 
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://png.findicons.com/files/icons/1714/dropline_neu/24/dialog_close.png" class="btn_close" title="Close" alt="Close" /></a>'); 
var popMargTop = ($('#' + popID).height() + 80) / 2; 
var popMargLeft = ($('#' + popID).width() + 80) / 2; 
//Apply Margin to Popup 
$('#' + popID).css({ 
'margin-top' : -popMargTop,
'margin-left' : -popMargleft 
}); 
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) 
return false; 
}); 
$('a.close, #fade').live('click', function() { 
$('#fade , .popup_block').fadeOut(function() { 
$('#fade, a.close').remove(); //fade them both out 
}); 
return false; 
}); 
</script>

    
    <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/419067_238953752859147_1698306198_n.jpg" width="200" height="300">
    
    <div style="text/javascript">
    <li><a href="https://twitter.com/tattoofreak1987" Target="_blank">Twitter</a>
    <li><a href="https://www.facebook.com/tattoofreak1987">Facebook</a>
    <li><a href="#?w=500" rel="02" class="poplight">Ask Me Anything</a>
    </div>
    
    <div id="02" class="popup_block">
<Center><font size="5" color="#1C1C1C"><p></font><iframe frameborder="0" scrolling="yes" width="50%" height="140" src="http://www.tumblr.com/ask_form/tattoofreak87.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
</center></div>

</div></div></div></div></div></div></div></div></div></div>
    
        
   </body>
</html>


#7 spudly1987

spudly1987

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 24 September 2013 - 05:57 AM

Okay I got everything working I believe, now when you click on ask me anything it opens in same tab but it brings up the area to ask, however i want it to be a small pop up window that opens in the same page in the center of the screen or top center

 

http://tattoofreak87.tumblr.com

<html>
    <head>   

    <title>Vince's Tumblr</title>
    
    <style type="text/css">

    .popup_block{
display: none;
background: #D3D3D3;
background-image: url();
padding: 10px;
font-family: Garamond;
float: left;
font-size: 10px;
position: fixed;
top: 50%; left: 50%;
z-index: 2;
border: 2px solid #363636;
-moz-box-shadow: 0 0 5px #CFCFCF;
-webkit-box-shadow: 0 0 5px #CFCFCF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -5px -5px 0 0;
}
*html .popup_block{
position: absolute;
};
    
    </style>

    </head>
    
    <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
$(document).ready(function() { 
// 
$('a.poplight[href^=#]').click(function() { 
var popID = $(this).attr('rel'); //Get Popup Name 
var popURL = $(this).attr('href'); //Get Popup href to define size 
var query= popURL.split('?'); 
var dim= query[1].split('&'); 
var popWidth = dim[0].split('=')[1]; //Gets the first query string value 
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://png.findicons.com/files/icons/1714/dropline_neu/24/dialog_close.png" class="btn_close" title="Close" alt="Close" /> 
var popMargTop = ($('#' + popID).height() + 80) / 2; 
var popMargLeft = ($('#' + popID).width() + 80) / 2; 
//Apply Margin to Popup 
$('#' + popID).css({ 
'margin-top' : -popMargTop,
'margin-left' : -popMargleft 
}); 
$('body').append('<div id="fade">
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) 
return false; 
}); 
$('a.close, #fade').live('click', function() { 
$('#fade , .popup_block').fadeOut(function() { 
$('#fade, a.close').remove(); //fade them both out 
}); 
return false; 
}); 
</script>

    <body background="http://www.wallpaper4me.com/images/wallpapers/gothicroses-7024.jpeg">
    
    <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/419067_238953752859147_1698306198_n.jpg" alt ="pic" width="200" height="300">
    <br>
    <ul>
    <li><a href="https://twitter.com/Tat_Addict69" Target="_blank">Twitter</a>
    <li><a href="https://www.facebook.com/tattoofreak1987">Facebook</a>
    <li><a href="http://www.tumblr.com/ask_form/tattoofreak87.tumblr.com" rel="02" class="poplight">Ask Me Anything</a>
    </ul>
    
    <div id="02" class="popup_block" align="center">
<font size="5" color="#1C1C1C"><br></font><iframe frameborder="0" scrolling="yes" width="50%" height="140" src="http://www.tumblr.com/ask_form/tattoofreak87.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
    
    </body>        
</html>



#8 KubeR

KubeR

    Advanced Member

  • Members
  • PipPipPip
  • 57 posts
  • Age:17

Posted 24 September 2013 - 06:09 AM

Then add height and width property's to pop_block's CSS code and it will display at the sizes you'll choose.

for example a small block :

width:400px;

height:200px;



#9 spudly1987

spudly1987

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 24 September 2013 - 06:43 AM

i got that but it is still opening in it's own page, and not pop up like it should be, am i missing something



#10 KubeR

KubeR

    Advanced Member

  • Members
  • PipPipPip
  • 57 posts
  • Age:17

Posted 24 September 2013 - 08:20 AM

<li><a href="http://www.tumblr.com/ask_form/tattoofreak87.tumblr.com" rel="02" class="poplight">Ask Me Anything</a></li>

You're redirecting to that page from here.
Change between the quoatation marks to #?w=400
as your jQuery is resizing the window by the width/number you write in the address bar after the #?w=

Edited by KubeR, 24 September 2013 - 08:26 AM.


#11 spudly1987

spudly1987

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 24 September 2013 - 03:28 PM

When I change the href link to anything other then what is there right now the link won't work ? i updated it on my end however



#12 KubeR

KubeR

    Advanced Member

  • Members
  • PipPipPip
  • 57 posts
  • Age:17

Posted 24 September 2013 - 04:50 PM

When I change the href link to anything other then what is there right now the link won't work ? i updated it on my end however

Probably because you're redirecting it to the same page,where it gets the width size of the page and gives the poplight it's side,but it's just a guess.
Did you try what I said before ? (replacing it with ' #?w=400 ')

Edited by KubeR, 24 September 2013 - 04:54 PM.


#13 spudly1987

spudly1987

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 25 September 2013 - 06:56 AM

Yes I have the only thing it will do is change the url to this "http://tattoofreak87...blr.com/#?w=400"

<html>
    <head>   

    <title>Vince's Tumblr</title>
    
    <style type="text/css">   
    
    .popup_block{
width:400px;
height:200px;
display: none;
background: #D3D3D3;
background-image: url();
padding: 10px;
font-family: Garamond;
float: left;
font-size: 10px;
position: fixed;
top: 50%; left: 50%;
z-index: 2;
border: 2px solid #363636;
-moz-box-shadow: 0 0 5px #CFCFCF;
-webkit-box-shadow: 0 0 5px #CFCFCF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -5px -5px 0 0;
}
*html .popup_block{
position: absolute;
}
    
    </style>

    </head>
    
    <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
$(document).ready(function() { 
// 
$('a.poplight[href^=#]').click(function() { 
var popID = $(this).attr('rel'); //Get Popup Name 
var popURL = $(this).attr('href'); //Get Popup href to define size 
var query= popURL.split('?'); 
var dim= query[1].split('&'); 
var popWidth = dim[0].split('=')[1]; //Gets the first query string value 
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://png.findicons.com/files/icons/1714/dropline_neu/24/dialog_close.png" class="btn_close" title="Close" alt="Close" /> 
var popMargTop = ($('#' + popID).height() + 80) / 2; 
var popMargLeft = ($('#' + popID).width() + 80) / 2; 
//Apply Margin to Popup 
$('#' + popID).css({ 
'margin-top' : -popMargTop,
'margin-left' : -popMargleft 
}); 
$('body').append('<div id="fade">
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) 
return false; 
}); 
$('a.close, #fade').live('click', function() { 
$('#fade , .popup_block').fadeOut(function() { 
$('#fade, a.close').remove(); //fade them both out 
}); 
return false; 
}); 
</script>

    <body background="http://www.wallpaper4me.com/images/wallpapers/gothicroses-7024.jpeg">
    
    <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/419067_238953752859147_1698306198_n.jpg" alt ="pic" width="200" height="300">
    <br>
    <ul>
    <li><a href="https://twitter.com/Tat_Addict69" Target="_blank">Twitter</a>
    <li><a href="https://www.facebook.com/tattoofreak1987">Facebook</a>
    <li><a href="#?w=400" rel="02" class="poplight">Ask Me Anything</a>
    </ul>
    
    <div id="02" class="popup_block" align="center">
<font size="5" color="#1C1C1C"><br></font><iframe frameborder="0" scrolling="yes" width="50%" height="140" src="http://www.tumblr.com/ask_form/tattoofreak87.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
    
    </body>        
</html>


Edited by spudly1987, 25 September 2013 - 06:57 AM.


#14 KubeR

KubeR

    Advanced Member

  • Members
  • PipPipPip
  • 57 posts
  • Age:17

Posted 25 September 2013 - 01:21 PM

$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://png.findicons.com/files/icons/1714/dropline_neu/24/dialog_close.png" class="btn_close" title="Close" alt="Close" />
You forgot to close it
$('body').append('<div id="fade">
and this as well.
Also,you didn't close the .ready() event. ( }); at the end)

#15 spudly1987

spudly1987

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 25 September 2013 - 01:32 PM

It shows that everything is closed though?



#16 KubeR

KubeR

    Advanced Member

  • Members
  • PipPipPip
  • 57 posts
  • Age:17

Posted 25 September 2013 - 01:47 PM

It is not closed.
You closed the first code I mentioned before with }); but should be ');
and the second & third are still open.

Edited by KubeR, 25 September 2013 - 01:50 PM.


#17 spudly1987

spudly1987

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 25 September 2013 - 01:52 PM

$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://png.findicons.com/files/icons/1714/dropline_neu/24/dialog_close.png" class="btn_close" title="Close" alt="Close" /> ');
$('body').append('<div id="fade"> ');

Are these ^ now closed properly? 



#18 KubeR

KubeR

    Advanced Member

  • Members
  • PipPipPip
  • 57 posts
  • Age:17

Posted 25 September 2013 - 08:32 PM

In some case's HTML closes the tag by himself(As far as I know,but not sure if always or in which cases or even how),but just to make sure -

$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://png.findicons.com/files/icons/1714/dropline_neu/24/dialog_close.png" class="btn_close" title="Close" alt="Close" /></a>');
$('body').append('<div id="fade"></div>');

Now only left is to close the .ready event.

Just add a }); at the end of the jQuery code(before </script>)


Edited by KubeR, 25 September 2013 - 08:33 PM.


#19 spudly1987

spudly1987

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 26 September 2013 - 05:15 AM

Well thank you for your assistance, but it is not working. so I'm just going to move on from it but thank you again 



#20 KubeR

KubeR

    Advanced Member

  • Members
  • PipPipPip
  • 57 posts
  • Age:17

Posted 26 September 2013 - 08:25 AM

Well,as you decide.
Anyhow,the last two steps are to close the first <script> tag & open it (because it should be seperated) and change the 'display' in CSS from "hide" to "block" when the user clicks.
I didn't hurry,because I thought I would confuse you and so you'll understand what you're doing and not just simply give you the working code,because there is no point in it.
So,the code should look like this :
<html>
    <head>
    <title>Vince's Tumblr</title>
    <style type="text/css">   
    .popup_block {
		width:400px;
		height:200px;
		display: none;
		background: #D3D3D3;
		background-image: url();
		padding: 10px;
		font-family: Garamond;
		float: left;
		font-size: 10px;
		position: fixed;
		top: 50%; left: 50%;
		z-index: 2;
		border: 2px solid #363636;
		-moz-box-shadow: 0 0 5px #CFCFCF;
		-webkit-box-shadow: 0 0 5px #CFCFCF;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}
	.btn_close {
		float: right;
		margin: -5px -5px 0 0;
	}
	*html .popup_block{
		position: absolute;
	}
    </style>
    </head>
    <script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
	<script>
		$(document).ready(function() {  
			$('a.poplight[href^=#]').click(function() { 
				var popID = $(this).attr('rel'); //Get Popup Name 
				var popURL = $(this).attr('href'); //Get Popup href to define size 
				var query= popURL.split('?'); 
				var dim= query[1].split('&'); 
				var popWidth = dim[0].split('=')[1]; //Gets the first query string value 
				$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://png.findicons.com/files/icons/1714/dropline_neu/24/dialog_close.png" class="btn_close" title="Close" alt="Close" /></a>');
				var popMargTop = ($('#' + popID).height() + 80) / 2; 
				var popMargLeft = ($('#' + popID).width() + 80) / 2; 
				//Apply Margin to Popup 
				$('#' + popID).css({ 
					'margin-top' : -popMargTop,
					'margin-left' : -popMargleft 
				}); 
				$('body').append('<div id="fade"></div>');
				$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) 
				$(".poplight").css("display","block");
				return false; 
			}); 
			$('a.close, #fade').live('click', function() { 
				$('#fade , .popup_block').fadeOut(function() { 
					$('#fade, a.close').remove(); //fade them both out 
				}); 
				return false; 
			}); 
		});
	</script>
    <body background="http://www.wallpaper4me.com/images/wallpapers/gothicroses-7024.jpeg">
    <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/419067_238953752859147_1698306198_n.jpg" alt ="pic" width="200" height="300"><br>
    <ul>
    <li><a href="https://twitter.com/Tat_Addict69" Target="_blank">Twitter</a></li>
    <li><a href="https://www.facebook.com/tattoofreak1987">Facebook</a></li>
    <li><a href="#?w=400" rel="02" class="poplight">Ask Me Anything</a></li>
    </ul>
    <div id="02" class="popup_block" align="center">
<font size="5" color="#1C1C1C"><br></font><iframe frameborder="0" scrolling="yes" width="50%" height="140" src="http://www.tumblr.com/ask_form/tattoofreak87.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
    </body>        
</html>

Edited by KubeR, 26 September 2013 - 08:32 AM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com