Adding pop up style

ဘေလာ့မွာ Popup ေလးထည့္ခ်င္သူေတြ အတြက္ပါ။စာေတြ၊ပံုေတြ နဲ႔ widget ေတြကို လုပ္ႏိုင္ပါတယ္။




လုပ္နည္းကေတာ့ အရင္ဆံုး </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[
//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;  /*ဒီမွာ Popup အျမင့္ေျပာင္းႏုိင္ပါတယ္*/
width:350px; /* ဒီမွာ Popup အက်ယ္ေျပာင္းႏိုင္ပါတယ္ */
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>

ၿပီးရင္ Design - Page Elements က Add a gadget ကိုႏွိပ္ၿပီး HTML&JavaScript မွာ ေအာက္က code ကိုထည့္ေပးပါ။

<div id="button"><input type="submit" value="POPUP BUTTON NAME" />
</div> 
<div id="popupContact"> <a id="popupContactClose">x</a> 
<h1> POPUP TITLE</h1>
<p id="contactArea">
YOUR CODE
</p> 
</div> <div id="backgroundPopup"></div>

POPUP BUTTON NAME ေနရာမွာ button ရဲ့ နာမည္ေျပာင္းေပးပါ။
POPUP TITLE ေနရာမွာ ေျပာင္းေပးပါ။ (မထည့္ရင္လည္းရပါတယ္)
YOUR CODE ေနရာမွာ ထည့္ခ်င္တဲ့ စာ၊ပံု ဒါမွမဟုတ္ widget code ကိုထည့္ေပးလိုက္ပါ။

တကယ္လို႔ သင့္ template မွာ jquery script သံုးၿပီးသားရွိတယ္္ဆိုရင္ ေအာက္က code ကိုဖ်က္လိုက္ပါ။

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

---