Sannas Bloggtips - Popup utan externt fönster (snyggare!)

Popup utan externt fönster (snyggare!)

Scriptkoden (placeras precis innan /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://static.tumblr.com/iddq6cw/Atplvofrt/tooltip-closebutton.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>

Första kodmallskoden (placeras precis efter /body):

Stilmallskoden:

Andra kodmallskoden (placeras där länken till din popup ska vara):

Kommentarer:

1 Han Lixom:

skriven 2014-01-07 11:15:23.000001+01:00

Tackar för tipset/tipsen!

Gjorde en liten popup-ruta för veckohumor med hjälp av din guide om det. Dyk förbi och kolla till vänster efter Veckans popup, hoppas jag kan bjuda på ett litet skratt iaf.

Du är faktiskt den första bloggen jag lägger till i "andra bloggar".. och jag måste säga, jag är kräsen.

Kommentera här: