jquery popup example

you can use new alias , for example

  var j = jQuery.noConflict();
  j("#btnOpen").click(function(){
    j(".locationPopupWrapper").show();  
  });

html section

<div class="locationPopupWrapper" style="display:none;">
<div class="locationPopup">
<h1>Show culture language<span><a href="#">x</a></span></h1>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
<td width="20%" align="center">1</td>
<td width="58%">India</td>
<td width="22%"><a href="#">English & Hindi</a></td>
 </tr>  
</table>
</div>
</div>
<input type="button" id="btnOpen" value="Model popup box" />

style section

body{margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;}
.locationPopupWrapper {background-color:rgba(0,0,0,0.5);position:absolute;height:100%;width:100%;}
.locationPopupWrapper .locationPopup{border:5px solid #cccccc;background-color:#FFFFFF;width:320px;height:280px;position:absolute;left:50%;top:50%;margin: -140px 0 0 -160px;font-size:12px;}
.locationPopupWrapper h1{font-size:20px;margin:0;padding:10px 0 10px 15px;}
.locationPopupWrapper h1 span{float:right;}
.locationPopupWrapper h1 span a {background-color:#808080;padding:10px 15px;color:#FFFFFF;text-decoration:none;}
.locationPopupWrapper .txtGray{color:#999999;font-size:12px;}
.locationPopupWrapper a{color:#005caf;font-size:12px;text-decoration:none;}

.locationPopupWrapper td{font-size:12px;padding:7px 0;}