Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Enkelt JavaScript popup fönster

JavaScript Popup-fönster är något som generellt sett är ogillade på Internet då det associeras med spam och reklam. Därför har många webbläsare valt att lägga in en automatisk block gentemot popup-fönster och det gäller ofta även om man har en popup på sin blogg. Men vill man ha en enkel popup som man inte behöver en extra blogg till, utan som redigeras i stilmall och kodmall på samma blogg som länken till popuppen ska finnas så finns det givetvis sätt att lösa det på. Med lite enkel JavaScript kan man lägga in ett snyggt och modern popup-fönster på sin blogg.

Lägg detta precis innan </body>:

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><br />
<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>
<p>');
$('#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>):

<div id="02" class="popup_block">
INNEHÅLLET I DIN POPUP HÄR (det kan vara bild, text, widget, formulär - vad som helst, koda med HTML & CSS)

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

 

Stilmallskoden:

.popup_block{
display: none;
background: #ffffff;
padding: 10px;
font-family: arial;
float: left;
font-size: 10px;
position: fixed;
top: 50%; left: 50%;
z-index: 999999999999;
border: 2px solid #333333;
-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: -25px -25px 0 0;
}
*html .popup_block {
position: absolute;
}

 

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

<a href="#?w=500" rel="02" class="poplight">länktext här</a>

 

popup

Transkriberat från film:

Snygg popup med JavaScript

Hej hörni.
Jag tänkte att jag skulle visa er ett litet alternativ till hur man kan göra en popup ruta. Den här rutan blir liksom inte ett externt fönster utan den kommer bara visas på sidan tills personen väljer att stänga ner den. Jag har gjort ett litet exempel här så jag har lagt en liten länk i den här menyn och när man trycker på den så kommer den här popup:en upp då och det är fyra koder som ska läggas in och då kan vi göra som så att vi börjar med script-koden och det är den här långa koden och den lägger vi precis ovanför /body i kodmallen. Vill man ha detta på flera sidor så ska det ju givetvis göras på alla sidor och sen så sparar vi.

Sen så kan vi gå vidare och lägga in HTML-koden, en första. Där och den lägger vi precis nedanför /body så mellan /body oh /HTML lägger vi den. Så och innehållet i din popup här det är ju där man ändrar  då så att man lägger in det man vill och man kan lägga in bilder man kan lägga in text, man kan lägga in kontaktformulär eller precis vad man vill och sen så sparar vi. Sen kan vi göra som så att vi lägger in stilmallskoden så då går vi in i stilmallen och så lägger vi den någonstans. Jag brukar ofta lägga in nya stilmallskoder längst ner bara så att man har koll på var man lade dem och så sparar vi.

Sen ska vi lägga in själva länken och det är kodmallskod numer 2. Det är den här korta koden och den får man ju lägga vart man vill. Man kan lägga den i sin drop-down eller man kan lägga den i sin meny eller ah, man får lägga den precis vart man vill. Men jag visar i alla fall hur man lägger den här i menyn tänkte jag. Då rullar man ner till div id side, så där har vi div id side och sedan lägger man den helt enkelt någonstans här, så jag lägger den där och så skriver jag POPUP HÄR och så sparar vi. Så och sedan är det helt enkelt bara att gå in på sin sida, så och då ligger min popup här och är det så att det blev på min, på den som jag visade först, att det blir en ful länk så får man ju helt enkelt bara styla till länken. Så trycker jag där och då kommer det upp här.

När man då vill ändra vad som står i, det var ju den koden som vi lade in längst ner här så då kan jag skriva: Hej mitt namn är Sanna, jag är 22 år gammal och läser till Webbutvecklare. Till exempel och så kan jag lägga in en bild och då är det ju image source och så lägger jag min bild där helt enkelt. Så man får fylla den här med precis vad man vill men det viktiga är att man inte tar bort någonting mer än det som, än det som stod alltså, innehållet i din popup här. Så, man får inte ta bort något annat än just den raden, men givetvis får man också ändra länktexten i den här länken som låg där. Alltså den som vi lade in i menyn, där det stor popup här. Då kan man ju till exempel skriva kontakt eller om man nu ska ha ett kontaktformulär eller läs mer om mig här, eller vad man nu vill. Det bestämmer man själv och det var det jag skulle visa er idag så får ni ha det så gott. Hej hej.

Skribent och ansvarig för DDB. Driver Designa din blogg sedan juni 2015. Har bland annat studerat webbdesign, marknadsföring och online strategier både i Sverige och USA. Jobbar inom IT.

Läs mina andra inlägg

Lämna ett svar

Din e-postadress kommer inte publiceras.