StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can use a div to popup.</p> <pre><code>$(document).ready(function() { // Here we will write a function when link click under class popup $('a.popup').click(function() { // Here we will describe a variable popupid which gets the // rel attribute from the clicked link var popupid = $(this).attr('rel'); // Now we need to popup the marked which belongs to the rel attribute // Suppose the rel attribute of click link is popuprel then here in below code // #popuprel will fadein $('#' + popupid).fadeIn(); // append div with id fade into the bottom of body tag // and we allready styled it in our step 2 : CSS $('body').append('<div id="fade"></div>'); $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); // Now here we need to have our popup box in center of // webpage when its fadein. so we add 10px to height and width var popuptopmargin = ($('#' + popupid).height() + 10) / 2; var popupleftmargin = ($('#' + popupid).width() + 10) / 2; // Then using .css function style our popup box for center allignment $('#' + popupid).css({ 'margin-top' : 0, 'margin-left' : -popupleftmargin }); return false; }); // Now define one more function which is used to fadeout the // fade layer and popup window as soon as we click on fade layer $('#fade').click(function() { // Add markup ids of all custom popup box here $('#fade , #popuprel , .close, .popupbox').fadeOut() return false; }); $('.close').click(function() { // Add markup ids of all custom popup box here $('#fade , #popuprel , .close, .popupbox').fadeOut() return false; }); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload