$(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 class="popupbox" id="popuprel" style="display: block; margin-top: -55.5px; margin-left: -932.5px;">\n' +
    '\t<div id="intabdiv">\n' +
    '    <div class="infosearch1">\n' +
    '        \n' +
    '        <form id="forms" name="forms" method="post" action="./main/s.php">\n' +
    '            <select name="way" id="" style=" border:none;background:rgba(255,255,255,.5); border-radius:40px; border:1px solid #fff; height:45px;">\n' +
    '              <option value="3">标题+内容</option>\n' +
    '              <option value="1">标题</option>\n' +
    '              <option value="2">内容</option>\n' +
    '            </select>\n' +
    '            <input name="k" type="text" id="k" class="input" value="搜索关键词" onfocus="if (value ==\'搜索关键词\'){value =\'\'}" onblur="if (value ==\'\'){value=\'搜索关键词\'}">\n' +
    '            <input type="submit" name="submit" value="搜索" class="button">\n' +
    '        </form>\n' +
    '        \n' +
    '        \n' +
    '    </div>\n' +
    '\t</div>\n' +
    '</div></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' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});


// 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 , #popuprel2 , #popuprel3').fadeout()
return false;
});
});