kp3နည္းပညာ၊၁၃၂၊Contact me form ေတြ Cbox ေတြကို Popup စတိုင္း ေလးနဲ.လုပ္ခ်င္ရင္

ဘေလာ့ဂါမိတ္ေဆြမ်ားအားလံုးႏွစ္သစ္မွာကိုယ္စိတ္ႏွလံုးက်န္းမာခ်မ္းသာၾကပါေစးလို႕ဆုမြန္
ေကာင္းေတာင္းရင္းႏွင့္ႏွစ္သစ္ Post ေလးအျဖင့္ Popup Boxes ေလးဘေလာ့မွာထားျခင္တဲ့မိတ္ေဆြ
ေတြအတြက္တင္လိုက္ပါတယ္၊ေတာ္ေတာ္ေလးလည္းလွပါတယ္၊ေအာက္မွာအသံုးဝင္ပံုေလးႏွင့္အသံုးျပဳ
နည္း Demo လင့္ခ္ေတြေပးထားပါတယ္၊မိမိရဲ႕ Contact me form ေတြ Cbox ေတြကို Popup စတိုင္း
ေလးနဲ႕လုပ္ရင္ဘေလာ့ကိုပိုျပီးလွပသြားသလိုပါဘဲေအာက္မွာ Demo လင့္ခ္မွာသြားၾကည့္ၾကပါ။
ဆက္သြယ္ရန္ဆိုျပီး Buttonေလးရိွပါတယ္။ႏိုပ္ၾကည့္လိုက္ရင္ေတာ့ေတြ႕ၾကမွာပါေနာ္၊ၾကိဳက္ၾကမယ္
ေတာ့ထင္တာဘဲ..ဟီး.ဒါေပမယ့္ႏွစ္ခုတြဲသံုးလို႕မရတာဆိုးတယ္ကြာ။ေအာက္မွာထည့္နည္းနဲ႕တကြCode

၁။Layout

၂။Edit HTML

ေအာက္က Code ကိုရွာပါ၊
</head>

ေတြ႕ျပီဆိုရင္ေအာက္မွာ၊ေအာက္ကCode ကိုထပ္ထည့္ေပးလိုက္ပါ၊

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!   
/***************************/

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
 "opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}

//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}

//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6

$("#backgroundPopup").css({
"height": windowHeight
});

}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

//LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});

//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
 disablePopup();
}
});

});

//]]>
</script>

<style type='text/css'>
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:200px;
width:350px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}
</style>

၃။Save Template button.ႏိုပ္ပါ။။

ဒုတိယအဆင့္။

၁။Layout

၂။Page Elements

၃။Add a Gadget

၄။HTML/Javascript' မွာေအာက္က Code ကိုထည္႕လိိုက္ပါ။
<div id="button"><input type="submit" value="ဒီမွာPopup-Button-အမည္ေရးပါ(ဥပမာ-contect me)" /></div> <div id="popupContact"> <a id="popupContactClose">x</a> <h1> ဒီမွာPopup title ေရးပါ(မိမိၾကိဳက္သလိုပါ)</h1> <p id="contactArea"> ဤေနရာမွာမိမိရဲ႕ Code ကိုထည့္ေပးပါ </p> </div> <div id="backgroundPopup"></div>

DEMOလင့္ခ္ဒီမွာ

၅။Save ႏုိပ္လိုက္ပါ၊ျပီးပါျပီ။။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

Related Post

Posted in: