1
2
3
4
5

Tutorial : Pop Up Box





- live preview // please click 'links' on my navigation 



got alot of request for this . im sorry its kinda late . but yeay i manage  to post it  \^o^ / so lets start yo
p/s : the code that im goin to give is just the basic . korang boleh edit mengikut citarasa dan imaginasi masing-masing (((and please dont copy mine)))




1. cari </html> then copy and paste code ni dekat bawah dia 


<script>
$(document).ready(function() {
//


//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
    var popID = $(this).attr('rel'); //Get Popup Name
    var popURL = $(this).attr('href'); //Get Popup href to define size


    //Pull Query & Variables from href URL
    var query= popURL.split('?');
    var dim= query[1].split('&');
    var popWidth = dim[0].split('=')[1]; //Gets the first query string value


    //Fade in the Popup and add close button
    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://tiny.cc/closeimg" class="btn_close" title="Close //" alt="Close" /></a>');

    //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;


    //Apply Margin to Popup
    $('#' + popID).css({
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });


    //Fade in Background
    $('body').append('<div id="fade"></div>');
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies


    return false;
});


//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() {
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  //fade them both out
    });
    return false;
});

});
</script>


2. lepas tu copy code css ni, paste before </style>


#fade {
display: none;
background: #000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .80;
z-index: 9999;
/* edit this */
.popup_block{
       display: none;
       background: #fff ;
       padding: 30px;
       float: left;
       position: fixed;
       top: 50%;
       left: 50%;
       z-index: 99999;
}

img.btn_close {
float: right;
margin: -65px -55px 0 0;
}
*html #fade {
position: absolute;
}
*html .popup_block{
position: absolute;
}


3. copy code lagi and paste selepas </style>


<div id="jongin" class="popup_block">
<center>PUT YOUR CONTENT OR LINK OR CBOX CODE HERE :)
</center>

</div>

jongin = your content name


4. you will put this code where it will be the link to your pop up or put this on your navigation link. 

<a href="#?w=420" rel="jongin" class="poplight">LINK NAME</a>


420 = your popup box width
jongin = your content name


5. preview and save





kalau ada soalan sila la ke kotak ask.fm  sebelah ---> bye  



Friday, July 12, 2013 • 11:07 PM


credit