<a href="#" id="opener"><font color="green"><b><u>О рипах</u></b></font></a>

<!--modal1-->
<link rel="stylesheet" href="http://rurip.ru/skripty/o_ripax/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="http://rurip.ru/skripty/o_ripax/jquery-ui-1.8.16.custom.min.js"></script>
<div style="padding:0;" id="dialog" title="О рипах">
<div style="padding:0;">
<div style="padding-top:5px"></div>
<div style="border:1px solid #ccc;padding:3px;">Окно будет дополняться и будет улучшен его дизайн</div>
<div id="accordion">
<h3><a href="#">Будуюшие рипы</a></h3>
<div style="padding:0">
<div style="border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:3px">
<div style="float:right"><a href="#" target="_blank"><u><font color="red">скачать</font></u></a></div>1.site.ru
</div>
<div style="padding:3px;border-bottom:1px solid #ccc;">
<div style="float:right"><a href="#"><u><font color="red">скачать</font></u></a></div>2.site.ru
</div>
<div style="padding:3px;border-bottom:1px solid #ccc;">
<div style="float:right"><a href="#"><font color="red"><u>скачать</u></font></a></div>3.site.ru
</div>
<div style="padding:3px;border-bottom:1px solid #ccc;">
4. site.ru
</div>
</div>
<h3><a href="#">Будуюшие адаптации</a></h3>
<div style="padding:0">
<div style="border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:3px">
<div style="float:right"><a href="#" target="_blank"><u>скачать</u></a></div>1.site.ru
</div>
</div>
<h3><a href="#">Правила заказов рипа</a></h3>
<div style="padding:0">
<div style="border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:3px">1.Вы должны установить баннер нашего сайта</div>
<div style="padding:3px;border-bottom:1px solid #ccc;">2.Вы должны привести на сайт 3-х пользователей</div>
<div style="padding:3px;border-bottom:1px solid #ccc;">Правила будут дополняться</div>
</div>
<h3><a href="#">Не рипаем</a></h3>
<div style="padding:0">
<div style="border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:3px">site.ru</div>
<div style="padding:3px;border-bottom:1px solid #ccc;">site.ru</div>
<div style="padding:3px;border-bottom:1px solid #ccc;">site.ru</div>
<div style="padding:3px;border-bottom:1px solid #ccc;">site.ru</div>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function(){
  $('.accordion .head').click(function() {
  $(this).next().toggle();
  return false;
  }).next().hide();
});
Or animated:
jQuery(document).ready(function(){
  $('.accordion .head').click(function() {
  $(this).next().toggle('slow');
  return false;
  }).next().hide();
});
</script>
<script>
  $(function() {
  $( "#accordion" ).accordion();
  });
  </script>
<script>
  $(function() {
  $( "#dialog" ).dialog({
  autoOpen: false,
width:500,
resizable:false,
modal:true,
padding:0,
  }
);
  $( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
  return false;
  });
  });
</script>
<!--/modal1-->